Javascript React样式化组件：如何基于道具添加css样式？

我一直在努力找到解决我问题的办法。 我有几个标题标签（H1、H2等），每个都在自己的文件中。 我想在基于道具调用它们时添加一些css。有些标题底部有小边框，有些则没有。所以，为了折射我的代码，我想添加一些基于道具的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

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;

调用标题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

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规则，那么如何使用样式化组件Heading2上的道具添加/导入它们

---

谢谢你的帮助：）

类似的方法很有效：

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

然后像这样使用：

<HeadingH2 relative paddingBottom />

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

---

为什么不干脆有一个

人头高度

道具呢？然后将其传递到样式化组件中？只要有一个

StyledHeader

styled组件，因为我猜所有标题样式文件中的代码基本相同？这是一个很大的不，你想永远不要重复你的代码

const Features = () => {
  return(
    <SectionContainer id={"what"}>
      <StyledHeader
        headingLevel={headingLevel}
      >
        What We Do
      </StyledHeader>
    <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;

我还要检查，如果传入的

headingLevel

的值不是6个标题级别中的任何一个，那么它应该有一个您想要的默认值

上面的代码只是快速的伪代码，但希望能在这里得到一般的想法？如果没有，请告诉我

---

我还建议您将

标题

组件拆分为一个单独的组件。

您应该明确检查：

你能写动态css的最好方法（对我来说）。与react完美配合使用，即使在需要时也可与ssr配合使用…

可能的答案：

我在一个单独的文件中添加了以下CSS规则，如下所示。 我创建了一个返回文本字符串的函数。我可以导入这个函数，并将这些规则添加到我想要的任何组件中

export const borderBottom = () => {
  return `
   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%);
  } 
`
 }

并在我希望的任何标题或组件上使用它：

import styled from 'styled-components';
import colors from '../../../../colors';
import fonts from '../../../../fonts';
import fontWeights from  '../../../../fontWeights';
import {borderBottom} from '../../../../css';

const HeadingH5 = styled.h5`
  color: ${colors.black};
  font-family: ${fonts.montSerrat};
  font-size: 1em;
  font-weight: ${fontWeights.light};
  letter-spacing: 0.1em;
  padding-bottom: 0.45em;
  margin-bottom: 25px;
  ${borderBottom}
`  
;

export default HeadingH5;

---

这对我有用。欢迎任何其他建议。

您也可以使用

样式化组件中的
css
帮助程序来创建
共享样式.js
文件

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

我认为为标题设置一个水平道具是一个好主意，但我会通过创建
HeadingBase
组件并将您的样式添加到
StyledBase
组件（另请参见演示中的代码）来处理它

HeadingBase
代码如下所示：

<HeadingH2 relative paddingBottom />

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

它是一个渲染h1，h2，。。。基于传递的属性
级别
的标记（默认为h1）。h标记接收
className
作为道具（样式化组件所需），并包含传递给组件的子级

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}从“/SharedStyles”导入它并将其添加到样式化组件中，如下所示：

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

我从未使用过样式化组件，但似乎有一个示例可以说明您想要做什么。基本上，样式化组件在构建CSS字符串时可以访问道具，您可以基于它们覆盖/添加样式。我需要能够添加css规则时，我想从一个特定的文件。页面上的示例完全不是模块化的。我需要找到一种方法，从单独的文件或其他文件调用这些css属性，以减少代码重复。这是将道具与
样式化组件一起使用的最佳答案。
@allan00958您可以导入样式化组件。您可以在使用组件时使用React道具更改属性。@allan00958如果此答案对您有效，请将其标记为正确：）谢谢@jsw324不，这个答案根本不适合我。我在下面发布了我的解决方案。我有点明白了，但我认为这不是正确的解决方案。我发现了一些使用连接的东西。我会更新我原来的问题。我发布了我的解决方案。你能解释一下什么是解决方案吗？很高兴你为自己的问题提供了答案，但是如果你想让别人从中受益，你应该解释一下你做了什么来解决问题以及为什么。如果您将此作为您自己问题的继续发布，请改为更新问题。我创建了一个函数，该函数以字符串形式返回一些CSS属性/值，并使用字符串替换将它们导入/导出到我希望的任何样式化组件中。这样，我的代码是干的和模块化的。