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

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

谢谢！

Answer 1

我没有使用 Slick carousel 的经验，但一般来说，在 React 中执行内联样式的方法如下：

1.- 创建一个样式对象，其键是 CSS 样式名称，但采用驼峰式大小写。例如，font-size 变为 fontSize，border-with 变为 borderWidth，等等

2.- 将该对象分配给 JSX 元素的 style 属性。

您还可以将样式对象作为文字直接分配给道具

来自 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 2

编辑 - 正如 Hung Nguyen slick has a dotsClass 稍后在其设置 API 中指出的那样，这样可能会更简单。谢谢洪！

当类似的东西不可用时，这仍然适用于在渲染后抓取未知元素：

使用生命周期事件 componentDidMount allows you to look for the elements after render(). You can use 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 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

一起使用

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

适合我

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

React Inline Style - How to style automatic generated tags?

css

inline-styles

reactjs

slick.js