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

【问题标题】：How can i style the Countdown Element from react-coundown-now?我如何从 react-countdown-now 设置倒计时元素的样式？
【发布时间】：2023-03-21 14:47:01
【问题描述】：

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

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

感谢您的帮助。

【问题讨论】：

标签： reactjs styles countdown

【解决方案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'));

【讨论】：

【解决方案2】：

将样式作为 Countdown 组件的 props 传递

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

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

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

【讨论】：

你可以在这里查看代码codesandbox.io/s/eloquent-clarke-zjkpj
你能说说为什么这个答案没用吗？
它与 OP 问题中提到的库无关，您展示了一种传递样式的通用方法