Question

const GreenRow = styled.div`
  background-color: green;
`
const RedRow = styled.div`
  background-color: red;
`
const YellowRow = styled.div`
  background-color: yellow;
`
const GreyRow = styled.div`
  background-color: grey;
`

const MyComponent = () =>
  <div>
    <GreenRow>Green row</GreenRow>
    <div>Blue row</div>
    <RedRow>Red row</RedRow>
    <YellowRow>Yellow row</YellowRow>
    <GreyRow>Grey row</GreyRow>
  </div>

我正在使用styled-components为组件中的元素设置样式。

我想对组件中的某些元素应用重复样式（例如font-weight）。其中一些组件已经使用styled-component设置样式，因此这将是某种“第二维”样式。

例如，如果我可以使用某个类名定义样式，那么我可以将该类名应用于每个元素。但是作为I've understood，styled-components不会返回任何类名。而且我不想开始在其他文件中定义样式而不是组件本身。

另一个想法是使用样式组件的css库呈现样式（请参阅下面的代码）并将其包含在每个适用的样式组件定义中。但是，我需要将一些元素转换为样式组件，仅用于此目的（因为它们没有其他样式）。

const FontWeight = css`
  font-weight: 600;
`

应用这种“第二维”样式的最简洁方法是什么？

Answer 1

您可以将一个函数插入到模板文字中，然后通过props ... ${props => props.component_name && css传递组件的}。

在下文中，我勾选了Row并为Green添加了一些额外的样式：

import styled, { css } from styled-components

const Row = styled.div`
  /* Generic row styling */
  font-weight: 600;

  /* Unique row styling */
  ${props => props.Green && css`
    background: green;
  `}

`

请注意，您还需要导入css！

现在，当你想要一个绿色的时候，你要做的就是渲染带有附加属性的行：

render(
  <div>
    <Row>Normal Row</Row>
    <Row Green>Green Row</Row>
  </div>
);

绿色行将继承常规行的所有样式，并且还继承该特定元素所特有的规则。

希望这有帮助！

在组件

1 个答案: