Passing props to classname using Emotion

Question

My code looks like this:

export const MUISlider = styled(Slider)(({ theme, marks }) => ({
  '& .MuiSlider-valueLabel': {
    padding: [4, 12],
    width: 33,
    height: 30,
    background: theme.palette.secondary.main,
  },
  '& .MuiSlider-markLabel': {
    color: theme.palette.secondary.light,
    '&[data-index="0"]': {
      transform: 'none',
    },
    '&[data-index=`${({ marks }) => marks.length}`]': {
      color: 'red',
    },
  },
  '& .MuiSlider-markLabelActive': {
    color: theme.palette.secondary.light,
  },
}));

I want to pass a prop into the CSS here where it says '&[data-index="${({ marks }) => marks.length}"]': { . How would I format this correctly using @emotion?

Passing props to classname using Emotion

0 Answers