我们将如何将 css 属性添加到样式化组件中的类中?

Question

我对使用样式化组件设置反应组件的样式有疑问。使用样式化组件将 css 属性添加到按钮非常容易，如下所示

const Button = styled.button`
background: black;
color: white;
border-radius: 7px;
padding: 20px;
margin: 10px;
font-size: 16px;
:disabled {
opacity: 0.4;
}
:hover {
box-shadow: 0 0 10px yellow;
}
`;

但是当我们看到传统的元素样式设计方式时，我陷入了困境。假设我们有按钮，我已经为其添加了活动类和 css 属性，如下所示

<button class='active'> click me</button>
.active{
background: red;
color: black;
}

我们将如何实现上述在样式化组件中设置元素样式的方式。目前面临的问题是在单击按钮时动态地将类名添加到按钮上，我必须通过样式化组件使用"active"类名突出显示活动按钮。

Answer 1

您可以在样式化组件内检查活动道具。在那里，您可以像这样根据此道具添加样式;

const Button = styled.button`
background: black;
color: white;
border-radius: 7px;
padding: 20px;
margin: 10px;
font-size: 16px;
:disabled {
opacity: 0.4;
}
:hover {
box-shadow: 0 0 10px yellow;
}
${props => props.active && `
/* only show this styling when active*/
background: red;
color: black;
`}
`

然后你可以像这样"激活"活动;

<Button active>click me</Button>
<Button active={true}>click me</Button>

并像这样"停用"活动;

<Button>click me</Button>
<Button active={false}>click me</Button>