对组件中的多个元素应用相同的样式

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 设置了样式，因此这将是某种 "second dimension" 样式。

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

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

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

应用此 "second dimension" 样式的最简洁方法是什么？

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

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

希望对您有所帮助！

对组件中的多个元素应用相同的样式

Apply same styling on multiple elements in component

css

reactjs

styled-components