reactjs - 如何在 ReactJS 中更改可重用组件的背景颜色？

Question

我在 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

Answer 1

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