Can I use props in a styled component written with this syntax?

Question

There is this example on how to create a custom slider component using material ui in react. The styled component definition is the following:

 const PrettoSlider = styled((props) => <Slider {...props} />)({
  height: 8,
  "& .MuiSlider-track": {
    color: "red",
  },
  ... (some more style properties) ...
});

Then this component is used as follows:

<PrettoSlider valueLabelDisplay="auto"/>

And this works fine, however, now I'd like to change the styles of the styled component for multiple instances, like:

<PrettoSlider valueLabelDisplay="auto" color="red"/>
<PrettoSlider valueLabelDisplay="auto" color="blue"/>
<PrettoSlider valueLabelDisplay="auto" color="green"/>

How can I pass additional properties ("color" in this case) so I can use it in the styled css definitions, i.e., replacing color: "red", for PrettoSlider with something like color: props.color,? I tried it e.g., by changing

styled((props) => <Slider {...props} />)({

to

styled((props) => <Slider {...props} />)((props) => {

However, using Typescript, it says that for props the type Theme was expected.

Answer 1

You can try out this syntax

const Container = styled.div<{color: string}>`
  color: ${props => props.color};
`

If a lot of properties depend on the prop such as being in dark mode: Import the css from styled components.

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

Then use is like:

const Container = styled.div<{isDarkMode: boolean}>`
  ${props =>
     props.isDarkMode
       ? css`...All properties for dark mode here`
       : css`...All properties for normal mode here`
   }
`