我可以在用这种语法编写的样式化组件中使用 props 吗？

Question

有一个关于如何创建自定义滑块组件的示例在反应中使用 material ui。样式组件定义如下：

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

那么这个组件的使用方法如下：

<PrettoSlider valueLabelDisplay="auto"/>

这很好用，但是，现在我想为多个实例更改样式化组件的样式，例如：

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

如何传递额外的属性（在本例中为“颜色”）以便我可以使用它在样式化的 css 定义中，即将 color: "red", for PrettoSlider 替换为 color : props.color,?我尝试过，例如，通过更改

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

到

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

然而，使用 Typescript，它表示对于 props 类型 Theme 是预期的。

Answer 1

你可以试试这个语法

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

如果很多属性都依赖于道具，例如处于黑暗模式：从样式化组件导入 css。

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

然后使用如下：

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

我可以在用这种语法编写的样式化组件中使用 props 吗？

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

reactjs

typescript

styled-components

react-props

styling