Question

我有一个简单的按钮组件，其中的动作作为道具传递。我决定使用 Styled-Components 对其进行样式设置。

在我的React应用程序中，我有三个具有不同操作的按钮，我希望它们具有不同的颜色。

我可以在StyledComponent内编写一些 CSS类，并作为道具传递和“指标”，为我的组件设置样式吗？

Answer 1

当然，这是样式化组件的最基本功能之一。

一种方法是创建不同的组件：

const MyButton = styled.button`
  font-size: 12px;
  border: 1px solid red;
`;

const FooButton = styled(MyButton)`
  color: red;
`;

const BooButton = styled(MyButton)`
  color: blue;
`;

另一种方法是使用道具：

const MyButton = styled.button`
  font-size: 12px;
  border: 1px solid red;
  color: ${({type}) => type === 'foo' ? 'red' : 'blue'};
`;
...
... 
<MyButton type={'foo'} />

对于您的原始问题，您可以这样做。但是在大多数情况下，以这种方式使用className不太像“样式化组件”。

Answer 2

您可以像这样在样式化组件内部设置类的样式：

df['Temperature_TimeStamp'] = pd.to_datetime(df['Temperature_TimeStamp'], dayfirst=True)

mask = df['Temperature_TimeStamp'].between('2020-04-27 05:30:00','2020-04-27 05:32:00')
temp = df.loc[mask, 'Temperature']
print (temp)
0    91.75
1    91.73
2    91.75
3    91.73
4    91.77
Name: Temperature, dtype: float64

我可以将className作为prop传递给ReactJS中的StyledComponent吗？

2 个答案: