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

我在React项目中有一个CTA组件。我在我的页面上使用过几次。我想改变背景颜色和颜色的文字的一个CTA使用。我该怎么做

我试图向其中一个CTA组件添加一个类名并对其进行样式设置，但没有任何更改。我还尝试添加一个内联样式。 My 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

import'../style/CTA.scss'
常量CTA=（{…props}）=>{
返回(
{props.word}
)
}
导出默认CTA

className='unique-cta-styleing'

仅适用于HTML标记。React组件可以或不可以使用

className

props执行任何操作

要设置React组件的样式，可以将其包装在您控制的

中

在这里，您还可以设置由CTA组件呈现的html元素的样式。例如，要设置CTA组件呈现的

元素的样式，可以将以下内容添加到CSS文件中：

.cta样式span{
颜色：红色；
} 

---

编辑：因为您可以编辑组件，所以可以将道具传递给孩子

const CTA = ({word, ...props}) => {
    return (
        <div {...props}>
           {word}
        </div>
    )
}

constcta=（{word，…props}）=>{
返回(
{word}
)
}

我建议您使用

使用样式化组件，您可以执行以下操作。 可以在js文件（styles.js）中设置此组件的样式：

`)

并将其导入到组件文件中

 import { YourComponent } from './styles'
 <YourComponent
   yourProps="Status01"
 >
     Component Name
 </YourComponent>

从“/styles”导入{YourComponent}
组件名称

---

我希望它能帮助你

我建议使用

样式化组件

。这是可以阅读的。他们还有一个不错的按钮示例，您可以阅读

import React from 'react';

import StyledCTA from '../../style/styled-CTA';

const CTA = ({
  onClick,
  word,
  backgroundColor,
  textColor,
}) => (
  <StyledCTA
    onClick={onClick}
    backgroundColor={backgroundColor}
    textColor={textColor}
  >
    {word}
  </StyledCTA>
);

export default CTA;

---

这应该对你有用。你可以看到它在这个链接上运行[ 也是

代码中的主要问题是，对于自定义组件，必须显式地将类名映射到html元素

class Test extends React.Component {
  render() {
    return (
         <CTA  word='CTA HERE' className='unique-cta-styling' style={{color: 'red'}}/>
    )
  }
}

    const CTA = ({ word,className,style,onClick }) => {
        return (
            <div
                className={`CTA ${className}`} 
                onClick={onClick}
                style={style}

            >
                {word}
            </div>
        )
    }

ReactDOM.render(
  <Test />,
  document.getElementById('container')
);

类测试扩展了React.Component{
render（）{
返回(
)
}
}
constcta=（{word，className，style，onClick}）=>{
返回(
{word}
)
}
ReactDOM.render(
,
document.getElementById（'容器'）
);

---

这个CTA组件中有什么？这个类名传递到哪里？刚刚用我的CTA组件更新了这个问题。我还发现了这个我认为是一个有趣的解决方案，除了如何将这个解决方案应用于CTA的一个简单背景颜色更改？谢谢你的回答，但我不想在do中添加另一个div它实际上并没有改变组件本身的颜色。我只是希望能够动态地改变我现有组件的背景颜色和文本颜色，而不创建新的div。啊，很有趣。我以前使用过样式化组件，但里面没有开关盒。

import styled from 'styled-components';

const getBackgroundColor = ({ backgroundColor }) => backgroundColor || 'red';
const getTextColor = ({ textColor }) => textColor || 'black';

export default styled.button`
  // Other static styling goes here
  background-color: ${getBackgroundColor};
  color: ${getTextColor};
`;

class Test extends React.Component {
  render() {
    return (
         <CTA  word='CTA HERE' className='unique-cta-styling' style={{color: 'red'}}/>
    )
  }
}

    const CTA = ({ word,className,style,onClick }) => {
        return (
            <div
                className={`CTA ${className}`} 
                onClick={onClick}
                style={style}

            >
                {word}
            </div>
        )
    }

ReactDOM.render(
  <Test />,
  document.getElementById('container')
);