Как изменить цвет фона повторно используемого компонента в ReactJS? - PullRequest
Новая
       28

Как изменить цвет фона повторно используемого компонента в ReactJS?

2 голосов
/ 12 апреля 2019

У меня есть компонент CTA в проекте React. Я использую это несколько раз на своей странице. Я хотел бы изменить цвет фона и цвет текста для одного из использования 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

Ответы [ 4 ]

1 голос
/ 14 апреля 2019

Я бы порекомендовал использовать Styled Components. Который можно прочитать о здесь . У них также есть хороший пример кнопки, о которой вы можете прочитать. 

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};
`;
1 голос
/ 12 апреля 2019

className='unique-cta-styling' применяется только априори к тэгам HTML. Реактивные компоненты могут или не могут делать что-либо с className реквизитом.

Чтобы оформить компонент React, вы можете обернуть его внутри <div>, которым вы управляете. 

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

Здесь также можно стилизовать элементы html, отображаемые компонентом CTA. Например, чтобы стилизовать элементы <span>, которые отображает компонент CTA, вы можете добавить в свой файл CSS следующее: 

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

Редактировать: так как вы можете редактировать свой компонент, вы можете передать свои реквизиты ребенку. 

const CTA = ({word, ...props}) => {
    return (
        <div {...props}>
           {word}
        </div>
    )
}
0 голосов
/ 18 апреля 2019

Это должно работать для вас.Вы можете увидеть, как он работает по этой ссылке [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/

0 голосов
/ 13 апреля 2019

Я бы порекомендовал вам использовать 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>

Надеюсь, это поможет вам!

...