如何从react- Countdown -now中设计Countdown元素的样式？

Question

我使用react-countdown-now组件。https://www.npmjs.com/package/react-countdown-now/v/1.0.0

我是这样使用它的：

import Countdown from 'react-countdown-now';

function Component() {
  return (
    <Countdown date='2020-02-01T01:02:03' style={{ color: '#00ff00' }}/>
  );
}

我想知道如何设置这个组件的样式，因为style标签不会影响任何东西。

谢谢你的帮助。

Answer 1

应设置渲染组件或目标样式范围选择器的样式：

import React from 'react';
import ReactDOM from 'react-dom';
import Countdown from 'react-countdown-now';
import styled from 'styled-components';

const PurpleCount = styled.div`
  span {
    color: purple;
  }
`;

// Random component
const Finished = () => (
  <span style={{ color: 'blue' }}>You are good to go!</span>
);

// Renderer callback
const renderer = ({ total, hours, minutes, seconds }) => {
  if (total) {
    // Render a countdown
    return (
      <span style={{ color: 'red' }}>
        {hours}:{minutes}:{seconds}
      </span>
    );
  } else {
    // Render a finished state
    return <Finished />;
  }
};

const App = () => (
  <React.Fragment>
    <Countdown date={Date.now() + 10000} renderer={renderer} />
    <br />
    <PurpleCount>
      <Countdown date={Date.now() + 10000} />
    </PurpleCount>
  </React.Fragment>
);

ReactDOM.render(<App />, document.getElementById('root'));

​

​

Answer 2

将样式作为Countdown组件的道具传递

return (
    <Countdown date='2020-02-01T01:02:03' styleColor={'#00ff00'}/>
  );

在Countdown组件中，获取道具并设置父div的样式。转到Countdonw组件并应用以下代码

 <div className="App" style={{ color: this.state.styleColor }}>