Styled Components - Conditionally render an entire css block based on props

With styled-component, or any CSS-in-JS, you can conditionally render a css block:

import styled, { css } from 'styled-components';

const light = css`
  background-color: white;
  color: black;
`;

const dark = css`
  background-color: black;
  color: white;
`;

const Box = styled.div`
  ${({ isDark }) => (isDark ? light : dark)}
`;

---

Full Example:

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import styled, { css } from 'styled-components';

const light = css`
  background-color: white;
  border: 2px solid black;
  color: black;
`;

const dark = css`
  background-color: black;
  color: white;
`;

const FlexBox = styled.div`
  margin: 20px;
  padding: 20px;
  ${({ isDark }) => (isDark ? light : dark)}
`;

const App = () => {
  const [isDark, setIsDark] = useState(false);

  const toggle = () => setIsDark(b => !b);

  return (
    <FlexBox isDark={isDark}>
      <div>Some Text</div>
      <button onClick={toggle}>Change Block</button>
    </FlexBox>
  );
};

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