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

Question

I use the react-countdown-now component. https://www.npmjs.com/package/react-countdown-now/v/1.0.0

I use it like this:

import Countdown from 'react-countdown-now';

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

I wonder how i can style this component, beacause the style tag doesn't affect something.

Thanks for help.

Answer 1

You should style the rendered component or target styling span selector:

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