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

Question

I understand that styles can be conditionally rendered such as:

const HelloWorldLabel= styled("div")<{ centered?: boolean }>`
  display: ${({ centered }) => (centered ? "block" : "flex")};;
  margin: ${({ centered }) => (centered ? "auto 0" : "unset")};
  padding: ${({ centered }) => (centered ? "0 15px" : "unset")};
`;

This does not look DRY - How can I (is it possible) render an entire block of css styles based on props?

Something like:

const HelloWorldLabel= styled("div")<{ centered?: boolean }>`
   if (centered) {
    display: "block" ;
    margin: $"auto 0";
     padding: "0 15px" ;
   } else {
     ......
   }
`;

Dennis Vash · Accepted Answer · 2019-12-05T16:56:49.450

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

Just to add on to the above, my team has also found this utility to be very helpful for readability: https://github.com/yldio/styled-is#usage — nicholascm, Dec 05 '19 at 21:48
This works great and definitely easy on the eyes for readability. — Darren Cooney, Jan 01 '22 at 15:15

score 2 · Answer 2 · answered Nov 29 '20 at 17:05

A less verbose way that worked for me is

const SideMenu = styled.aside`
  width: 200px;
  ${({ isHidden }) => isHidden && `
      display: none;
    `}
  // another random prop you need here
  ${({ redBg }) => redBg && `
    background-color: red;
  `}
`;

Clarity · Answer 3 · 2019-12-05T17:04:39.413

1

You can use a function and return the css based on prop:

const HelloWorldLabel= styled("div")`
  ${({centered}) => {
    if (centered) {
      return `
       display: "block" ;
       margin: "auto 0";
       padding: "0 15px";
      `
    } else {
      return `// Other styles here`
    }
   }}
`;

edited Dec 05 '19 at 17:04

answered Dec 05 '19 at 16:58

Clarity

10,730
2
25
35

1

Note that with this solution, you returning a string literal, therefore you won't get auto-complete if you working with css-in-js plugins. – Dennis Vash Dec 05 '19 at 17:25
this is definitely an option, thank you for posting this answer as well! – Null isTrue Dec 05 '19 at 20:45

score 0 · Answer 4 · answered Dec 05 '19 at 17:43

The alternative is

let customCss = setCustomCss(position) => {
let positionCss = {
center: [ 'css: value;', 'css:value;'],
left: .....
right: ....
}

return   return positionCss[position];

}
  let HelloWorldLabel= styled('div')(customCss, {
    /* css common to all */
  })

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

4 Answers4