Question

我在React项目中有一个CTA组件。我在页面上使用了几次。我想更改CTA用途之一的背景颜色和文本颜色。我怎样才能做到这一点？

我尝试向CTA组件之一添加className并设置其样式，但未进行任何更改。我还尝试添加内联样式。我的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道具。

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

<div className='cta-styling' style={{background-color: 'black'}}>
  <CTA  word='CTA HERE' />
</div>

您还可以在此处设置CTA组件呈现的html元素的样式。例如，要设置CTA组件呈现的<span>元素的样式，可以将以下内容添加到CSS文件中：

.cta-styling span {
  color: 'red';
}

编辑：由于您可以编辑组件，因此可以将道具传递给孩子。

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

Answer 2

我建议使用Styled Components。可以阅读有关here的内容。他们还有一个不错的按钮示例，您可以阅读。

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;

然后在样式化的组件文件中可以具有以下内容：

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};
`;

Answer 3

我建议您使用styled-components

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

export const YourComponent= styled.button`
    margin-top: 10px;
    margin-bottom: 5px;
    background-color: ${props => {
           switch (props.yourProps) {
                 case "Status01":
                     return "#0D47A1";
                 case "Status02":
                     return "#2E7D32";
                 default:
                      return "#FF8F00";
         }
        }};

       &:hover {
          background-color: ${props => {
              switch (props.yourProps) {
                 case "Status01":
                     return "#0D47A1";
                 case "Status02":
                     return "#2E7D32";
                 default:
                      return "#FF8F00";
         }
        }};
       }

`;

并将其导入您的组件文件中。

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

希望对您有帮助！

Answer 4

这应该为您工作。您可以在此链接中看到它正在运行[ 也https://jsfiddle.net/wu7kv15q/1/]。

代码中的主要问题是，对于自定义组件，必须显式映射ClassName直到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')
);

https://jsfiddle.net/wu7kv15q/1/

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

4 个答案: