我如何从 react-countdown-now 中设置倒计时元素的样式？

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

我想知道如何设置此组件的样式，因为样式标签不会影响某些东西。

感谢您的帮助。

Answer 1

将样式作为倒计时组件的道具传递

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

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

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

Answer 2

您应该为呈现的组件或目标样式范围选择器设置样式：

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

我如何从 react-countdown-now 中设置倒计时元素的样式？

How can i style the Countdown Element from react-coundown-now?

styles

countdown

reactjs