React Styled 组件：如何根据 props 添加 css 样式？

Question

我一直在努力寻找解决我的问题的方法。我有几个标题标签（H1、H2 等），每个标签都在自己的文件中。我想在基于 prop 调用它们时添加一些 css。有些标题有一个小边框底部，有些则没有。因此，为了折射我的代码，我想添加一些基于 prop 的 css。我似乎找不到办法。

以下是标题 H2 的示例：

import styled from 'styled-components';
import colors from '../../../../colors'; 
import fonts from '../../../../fonts';
import fontWeights from '../../../../fontWeights';

const HeadingH2 = styled.h2`
  color: ${colors.text};
  font-family: ${fonts.montSerrat};
  font-size: 1.6em;
  font-weight: ${fontWeights.light};
  letter-spacing: 0.2em;
  padding-bottom: 0.7em;
  position: relative;
  text-transform: uppercase;
  text-align: center;
  &:after{
    content: "";
    display: block;
    height: 3px;
    width: 45px;
    background-color: currentColor;
    /* position */
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
`;

export default HeadingH2

调用标题 H2 的示例：

import React from 'react';
import HeadingH2 from '../../common/headings/heading_h2';
import HeadingBaseline from '../../common/headings_baseline';


// Features
import {SectionContainer, FeaturesContainer} from './features.style';

import Feature from './feature';
import feature1 from '../../../img/features/feature1.png';
import feature2 from '../../../img/features/feature2.png';
import feature3 from '../../../img/features/feature3.png';

// Text
import Text from '../../../content';

const Features = () => {
  return(
    <SectionContainer id={"what"}>
      <HeadingH2>
        What We Do
      </HeadingH2>
    <HeadingBaseline>
      {Text.headingBaseline}
    </HeadingBaseline>
  <FeaturesContainer>
    <Feature 
      src={feature1} 
      headingText={Text.feature1.heading}
      paragraph={Text.feature1.paragraph}
      />
    <Feature 
      src={feature2} 
      headingText={Text.feature2.heading}
      paragraph={Text.feature2.paragraph}
      />
    <Feature 
      src={feature3} 
      headingText={Text.feature3.heading}
      paragraph={Text.feature3.paragraph}
      />
  </FeaturesContainer>
</SectionContainer>
)
};

export default Features;

我想提取以下 CSS 属性

position: relative;
text-transform: uppercase;
text-align: center;
&:after{
 content: "";
 display: block;
 height: 3px;
 width: 45px;
 background-color: currentColor;
 /* position */
 position: absolute;
 bottom: 0;
 left: 50%;
 transform: translateX(-50%);

因此，假设我将上述 CSS 规则放在单独的文件中，如何使用样式组件 HeadingH2 上的 props 添加/导入它们。

谢谢您的帮助 ：）

Answer 1

像这样的东西有效：

const HeadingH2 = styled.h2`
  position: ${props => props.relative && 'relative'};
  padding: ${props => props.paddingBottom ? '0 0 20px 0' : '0'};
}
`;

然后像这样使用：

<HeadingH2 relative paddingBottom />

Answer 2

您还可以使用csshelper fromstyled-components创建SharedStyles.js文件。

在演示中您可以看到它的实际效果。仅以继承组件的样式使用它并不能按预期工作。如果我添加它，那么StyledBase之后变量将不会正确添加（悬停样式覆盖停止工作）。这就是为什么我复制${borderBottom}到每个样式组件Heading1/Heading2而不是将其添加到StyledBase.

我认为为标题设置 level 属性是一个好主意，但我会通过创建一个HeadingBase组件并将样式添加到StyledBase组件中来以不同的方式处理它（另请参阅演示中的代码）。

代码HeadingBase如下所示：

const HeadingBase = ({ className, children, level = 1 }) =>
    React.createElement(`h${level}`, { className }, children);

它是一个根据传递的 prop 渲染 h1,h2,... 标签的组件level（默认为 h1）。h 标签className作为 props 接收（样式组件需要）并包含传递给组件的子级。

SharedStyles.js

import { css } from "styled-components";

export const borderBottom = css`
    &:after{
        content: "";
        display: block;
        height: 3px;
        width: 200px;
        background-color: ${props => props.color || "black"};
        /* position */
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
`;

然后您可以将其导入import { borderBottom } from "./SharedStyles";并将其添加到您的样式组件中，如下所示：

const Heading1= styled.h1`
    ${borderBottom}
`;