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

Posted 2023-03-15

【中文标题】我可以在用这种语法编写的样式组件中使用道具吗？

【英文标题】：Can I use props in a styled component written with this syntax?

【发布时间】：2022-01-10 15:10:07

【问题描述】：

这个例子是关于如何创建一个自定义的滑块组件 在反应中使用材料 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 定义中，即将 PrettoSlider 的 color: "red", 替换为 color: props.color,?我试过了，例如，通过改变

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

到

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

但是，使用 Typescript，它表示 props 的类型 Theme 是预期的。

【参考方案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`
   
`