Javascript 样式化组件文本或段落

是否可以使用已设置样式的组件设置文本或段落的样式？如果是，如何将文本传递到组件中

例如，我有一个页脚组件：

const Footer = () => (
  <footer className="site-footer">
    <p className="text"> HELLO</p>
    <Copyright
      link={'https://hotmail.com'}
      text={'HELOO'}></Copyright>
  </footer>
);

export default Footer;

---

但是，如果我注释掉段落并使用StyledText组件，则不会显示任何内容。如果我尝试传递

Styled Component text={'HELLO'}

我的应用程序就会崩溃。如何转换页脚，使其使用样式化组件？

样式化组件

只处理组件的样式，而不处理内容。将保留所有

子项

，因此您可以执行以下操作：

// JSX
<StyledText>Hello</StyledText>

// StyledText.js
export default styled.p`
  color: white;
  text-align: center;
`;

import styled from 'styled-components';

const StyledText = styled.p`
  color: white;
  text-align: center;
`;

export default function Footer({text}){
  return   <footer className="site-footer">
    <StyledText>{text}</StyledText>
    <Copyright
      link={'https://hotmail.com'}
      text={text}/>
  </footer>;
}

//JSX
你好
//StyledText.js
导出默认样式的.p`
颜色：白色；
文本对齐：居中；
`;

您可以将组件更新为如下所示：

// JSX
<StyledText>Hello</StyledText>

// StyledText.js
export default styled.p`
  color: white;
  text-align: center;
`;

import styled from 'styled-components';

const StyledText = styled.p`
  color: white;
  text-align: center;
`;

export default function Footer({text}){
  return   <footer className="site-footer">
    <StyledText>{text}</StyledText>
    <Copyright
      link={'https://hotmail.com'}
      text={text}/>
  </footer>;
}

---

希望这有帮助，

是的，您可以为每个

html

元素和每个自定义组件设置样式，只要它们经过

className

本例介绍了基本API：

const Text = styled.p`
  color: blue;
  text-align: center;
`;

const Copyright = ({ className, link, text }) => (
  <div className={className}>
    <Text>{link}</Text>
    <Text>{text}</Text>
  </div>
);

const StyledCopyright = styled(Copyright)`
  border: 1px black solid;
  ${Text} {
    color: palevioletred;
  }
`;

const Footer = () => {
  return (
    <footer>
      <Text>HELLO</Text>
      <Copyright link="https://hotmail.com" text="World" />
      <StyledCopyright link="https://hotmail.com" text="World" />
    </footer>
  );
};

const Text=styled.p`
颜色：蓝色；
文本对齐：居中；
`;
const版权=（{className，link，text}）=>(
{link}
{text}
);
const StyledCopyright=styled（版权所有）`
边框：1px黑色实心；
${Text}{
颜色：淡紫罗兰色；
}
`;
常量页脚=（）=>{
返回(
你好
);
};

---

您要查找的不是

.text

，而是

样式化的.p

这是您要渲染的HTML元素，我认为

.p

给出了一个错误。然而，什么是正确的方式来传递文本呢？那么，什么是

样式化的.text

@阿格尼