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是类，我会添加到按钮时＃39} ; s有效（用于切换按钮）。

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

如果你想分享一些样式，你可以简单地将它移动到你在两个地方使用的变量中：

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
  })
}));

如何使用样式组件添加基于属性的多个样式？

2 个答案: