Trong Lam Phan Trong Lam Phan - 4 months ago 28
React JSX Question

React Inline Style - How to style automatic generated tags?

I'm using Slick Carousel with React but i need modify some styles of some divs which are automatically created by Slick.

import React from 'react';
import Slider from 'react-slick';

export default class Slider extends React.Component {
render: function () {
var settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};

return (
<Slider {...settings}>
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
<div><h3>6</h3></div>
</Slider>
);
}
});


Because i set dots = true, so the dots will be displayed below my slider. But i need to change its style. With inline style, how can i do that ?

Thanks !

Answer

Using the lifecycle event componentDidMount allows you to look for the elements after render(). You can use ReactDOM.findDOMNode() to get the real DOM elements (not the React virtual DOM). Then just identify the elements you need and change their style.

Demo using a Fork of react-slick

var ReactSlickDemo = React.createClass({
  componentDidMount: function() {
    //find the unknown slider elements here
    var elements = ReactDOM.findDOMNode(this).children[0];
    //modifying styles
    elements.style.border = "5px solid red";
  },

  render: function() {
    var settings = {
      dots: true
    }
    return (
      <div className='container'>
        <Slider {...settings} >
          <div><img src='http://placekitten.com/g/400/200' /></div>
          <div><img src='http://placekitten.com/g/400/200' /></div>
          <div><img src='http://placekitten.com/g/400/200' /></div>
          <div><img src='http://placekitten.com/g/400/200' /></div>
        </Slider>
      </div>
    );
  }
});

ReactDOM.render(
  <ReactSlickDemo />,
  document.getElementById('container')
);
Comments