Question

我正在使用Slick Carousel和React，但我需要修改一些由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 ，所以点将显示在我的滑块下方。但我需要改变它的风格。使用内联样式，我该怎么做？

谢谢！

Answer 1

编辑 - 如Hung Nguyen稍后所述，slick在其设置API中有一个dotsClass，因此可能更简单。谢谢Hung！

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

使用生命周期事件componentDidMount可以在render（）之后查找元素。您可以使用ReactDOM.findDOMNode()来获取真正的DOM元素（而不是React虚拟DOM）。然后只需识别您需要的元素并改变其风格。

Demo using a Fork of react-slick

UPDATE dbo.LaysCustomer
SET  LaysName = T.Name
FROM dbo.NorthwindCustomer T
WHERE 
    LaysCustomer.LCid = T.NCid

Answer 2

我没有使用Slick旋转木马的经验，但一般来说，做反应的内联样式的方法如下：

1.-创建一个样式对象，其中的键是CSS样式名称，但是可以使用驼峰。例如，font-size变为fontSize，border-with变为borderWidth等。

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

您还可以将样式对象直接指定给prop，作为文字

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

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

为我工作

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

4 个答案: