如何使用 styled-components 添加基于属性的多个样式？

Question

在 CSS/LESS 我会这样做：

.button {
    &:active, .active {
        background-color: #393939;
        border-color: #2F2F2F;
        box-shadow: inset 0 0 0 1px #3D3D3D,
            inset 0 2px 0 #323232;

    }
}

其中 :active 是我的按钮被单击时的样式，.active 是 class 我会添加按钮处于活动状态时（对于可切换按钮）。

有了 styled-components 我现在有这个：

import styled from 'styled-components';

export default styled.button`
    width: 32px;
    height: 32px;
    border-radius: 5px;
    background-color: #535353;
    border: 1px solid transparent;
    cursor: pointer;
    outline: none;
    padding: 4px;

    &:active, /* what to do here?? */ {
        background-color: #393939;
        border-color: #2F2F2F;
        box-shadow: inset 0 0 0 1px #3D3D3D,
            inset 0 2px 0 #323232;

    }
`

但我不知道如何根据某些属性重新使用所有这些 :active 样式。我知道我可以使用 ${props => prop.active} 访问道具，但我不知道如何在不重复所有这些样式的情况下重新使用该样式块。

我该怎么做？

Answer 1

如果您想共享一些样式，只需将其移动到您在两个地方都使用的变量中即可：

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

const activeStyles = `
   background-color: #393939;
    border-color: #2F2F2F;
    box-shadow: inset 0 0 0 1px #3D3D3D,
        inset 0 2px 0 #323232;
`

export default styled.button`
  width: 32px;
  height: 32px;
  border-radius: 5px;
  background-color: #535353;
  border: 1px solid transparent;
  cursor: pointer;
  outline: none;
  padding: 4px;

  &:active {
    ${activeStyles}
  }

  ${props => props.active ? css`${activeStyles}` : ''}
`

Answer 2

您可以这样做，而不是使用模板文字：

const Heading = styled.div([], props => ({
  backgroundColor: 'red',

  ...(props.isOpen && {
    backgroundColor: 'blue', 
    color: 'white',
    // ...some other styles
  })
}));

如何使用 styled-components 添加基于属性的多个样式？

How to add multiple styles based on property with styled-components?

css

reactjs

styled-components

如何使用 styled-components 添加基于 属性 的多个样式？

How to add multiple styles based on property with styled-components?

css

reactjs

styled-components

如何使用 styled-components 添加基于属性的多个样式？