我在 React 项目中有一个 CTA 组件。我在我的页面上多次使用它。我想为 CTA 用途之一更改文本的背景颜色和颜色。我怎样才能做到这一点?
我尝试将 className 添加到 CTA 组件之一并为其设置样式,但没有任何更改。我还尝试添加内联样式。
我的 App.js 文件有 CTA 组件:
<CTA word='CTA HERE' className='unique-cta-styling' style={{color: 'black'}}/>
我的 CTA 组件是这样的:
import '../../style/CTA.scss'
const CTA = ({ ...props }) => {
return (
<div
class='CTA'
onClick={props.onClick}
>
{props.word}
</div>
)
}
export default CTA
最佳答案
className='unique-cta-styling'
仅适用于 HTML 标签的先验。 React 组件可能会也可能不会对 className
做任何事情 Prop 。
要设置 React 组件的样式,您可以将其包裹在 <div>
中。你控制的。
<div className='cta-styling' style={{background-color: 'black'}}>
<CTA word='CTA HERE' />
</div>
在这里,您还可以为 CTA 组件呈现的 html 元素设置样式。例如,设置样式
<span>
CTA 组件呈现的元素,您可以将以下内容添加到您的 CSS 文件中:.cta-styling span {
color: 'red';
}
编辑:因为您可以编辑您的组件,所以您可以将您的 Prop 传递给 child 。
const CTA = ({word, ...props}) => {
return (
<div {...props}>
{word}
</div>
)
}
关于reactjs - 如何在 ReactJS 中更改可重用组件的背景颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55658951/