React Inline Style - 如何自动生成标签的样式？

Question

我正在使用带有React的Slick Carousel，但我需要修改一些由Slick自动创建的div的样式。

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> 
     ); 
    } 
}); 

因为我设置点=真，所以点下方会显示我的滑块。但我需要改变它的风格。使用内联样式，我该怎么做？

谢谢！

Answer 1

编辑 - 如后面提到的Hung Nguyen浮油在他们的设置API中有dotsClass，所以可能会更简单。谢谢洪！

• 当类似的东西不可用，虽然，这仍然可以工作，抓住未知的元素渲染后：

使用生命周期事件componentDidMount让你去寻找元素渲染后（）。您可以使用ReactDOM.findDOMNode()来获取真实的DOM元素（而不是React虚拟DOM）。然后确定你需要的元素并改变他们的风格。

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') 
); 

Answer 2

我没有用油滑旋转木马的经历，但一般做内联样式中的反应方式如下：

1.-创建一个样式对象，是与作为CSS样式名称键，但骆驼套。因此，例如，font-size变得fontSize，border-with变得borderWidth等

2：该对象分配到style托您的JSX元素。

你也可以指定样式对象直接到道具，从React docs文字

一个例子：

var divStyle = { 
    color: 'white', 
    backgroundImage: 'url(' + imgUrl + ')', 
    WebkitTransition: 'all', // note the capital 'W' here 
    msTransition: 'all' // 'ms' is the only lowercase vendor prefix 
}; 

ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode); 

还有用于内嵌样式更完整的解决方案，如Radium，如果你决定全力内联。

希望这会有所帮助。

Answer 3

IMO，最好的办法是使用dotsClass重新风格点的风格自己

var ReactSlickDemo = React.createClass({ 
    render: function() { 
    var settings = { 
     dots: true, 
     dotsClass: 'custom-dots' 
    } 
     return (
     <div className='container'> 
     <Slider {...settings} > 
      <div>1</div> 
      <div>2</div> 
      <div>3</div> 
      <div>4</div> 
     </Slider> 
     </div> 
    ); 
    } 
}); 

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

Full demo with CSS

这是另一种方式。只使用这个，如果你不需要

var ReactSlickDemo = React.createClass({ 
    componentDidMount: function() { 
    var $stickContainer = $(ReactDOM.findDOMNode(this)).find('.stickContainer'); 
    // Need to defer because there is no dots at this moment 
    // Dots are rendered after slide content rendered for calculating number of slide 
    // https://github.com/akiran/react-slick/blob/master/src/inner-slider.jsx#L101 
    setTimeout(function() { 
     var $dots = $stickContainer.find('li'); 
     $dots.css('background-color', 'red'); 
     }, 0); 
    }, 

    render: function() { 
    var settings = { 
     dots: true, 
     className: 'stickContainer' 
    } 
     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') 
); 

DEMO

Answer 4

只需使用CSS与改变积极点的风格：全球

:global(.slick-active){ 
     background-color:#71afe5 
    } 

对我的作品