3
votes

Comment changer la couleur de fond d'un composant réutilisable dans ReactJS?

J'ai un composant CTA dans le projet React. Je l'utilise plusieurs fois sur ma page. Je voudrais changer la couleur d'arrière-plan et la couleur du texte pour l'une des utilisations du CTA. Comment puis je faire ça?

J'ai essayé d'ajouter un nom de classe à l'un des composants du CTA et de le styliser mais rien n'a changé. J'essaye également d'ajouter un style en ligne. Mon fichier App.js contient le composant CTA:

import '../../style/CTA.scss'

const CTA = ({ ...props }) => {
    return (
        <div
            class='CTA' 
            onClick={props.onClick}
        >
            {props.word}
        </div>
    )
}

export default CTA

Mon composant CTA est le suivant:

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

reactjs components styling code-reuse

3 commentaires

Que contient ce composant CTA? Où ce ClassName est-il passé?

Je viens de mettre à jour la question avec mon composant CTA.

J'ai également trouvé cela que je pensais être une solution intéressante, sauf comment appliquer cette solution à un simple changement de couleur d'arrière-plan pour un CTA? itnext.io/…

4 Réponses :

1
votes

className = 'unique-cta-styling' s'applique uniquement, a priori aux balises HTML. Les composants React peuvent ou ne peuvent rien faire avec les accessoires className .

Pour styliser un composant React, vous pouvez l'envelopper dans un

  que vous contrôlez.  p> const CTA = ({word, ...props}) => {
    return (
        <div {...props}>
           {word}
        </div>
    )
}
  Ici, vous pouvez également styliser les éléments html rendus par le composant CTA. Par exemple, pour styliser les éléments   que le composant CTA rend, vous pouvez ajouter ce qui suit à votre fichier CSS: 
 .cta-styling span {
  color: 'red';
} 
 
  Modifier: puisque vous pouvez modifier votre composant, vous pouvez transmettre vos accessoires à l'enfant. 
 <div className='cta-styling' style={{background-color: 'black'}}>
  <CTA  word='CTA HERE' />
</div>

1 commentaires

Merci pour votre réponse mais je ne veux pas ajouter un autre div au DOM. Et cela ne change pas réellement la couleur du composant lui-même. Je veux juste pouvoir changer dynamiquement la couleur d'arrière-plan et la couleur du texte de mon composant existant sans créer un nouveau div.

0
votes

Je vous recommande d'utiliser styled-components

En utilisant des composants stylés, vous pouvez le faire quelque chose comme suivre. vous pouvez styliser ce composant dans un fichier js (styles.js):

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

et l'importer dans votre fichier de composant. p >

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

J'espère que cela vous aidera!

1 commentaires

Ah intéressant. J'ai déjà utilisé des composants stylisés, mais pas avec un boîtier d'interrupteur à l'intérieur.

1
votes

Je recommanderais d'utiliser Styled Components . Ce qui peut être lu sur ici . Ils ont également un bon exemple de bouton que vous pouvez lire.

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

Et puis dans votre fichier de composant stylisé, vous pouvez avoir ce qui suit:

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;

0 commentaires

0
votes

Cela devrait fonctionner pour vous. Vous pouvez le voir s'exécuter sur ce lien [ https://jsfiddle.net/wu7kv15q/1/] également.

Le Le principal hic dans votre code était que vous devez explicitement mapper le ClassName aux éléments html dans le cas de composants personnalisés.

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 commentaires