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 
    } 

對我的作品