Prévenir une multitude de style associés React accessoires en utilisant des modules CSS

Question

Dans mon projet, j'ai une composante Text:

import React from 'react' 
import { bool, string, number, element, func, object, any } from 'prop-types' 
import cx from 'classnames' 
import s from './styles/Text.css' 


const Text = (props) => { 
    const renderMultiLines =() => { 
    const items = props.children.split(' ') 
    return items.map(text => <div style={{ marginBottom: '2px' }} className={s.multiLineItem}>{text}</div>) 
    } 

    return (
    <div 
     className={cx(
     s.text, 
     props.ellipsis && s.ellipsis, 
     props.isUpperCase && s.isUpperCase, 
     props.isBold && s.bold, 
     props.isExtraBold && s.extraBold, 
     props.isExtraSpaced && s.extraSpaced, 
     props.multiLine && s.multiLine, 
     props.active && s.underlined, 
     props.active && s.primary, 
     s[props.color], 
     s[props.size], 
    )} 
     onClick={props.onClick} 
     style={props.style} 
    > 
     {!props.multiLine && props.children} 
     {props.multiLine && renderMultiLines()} 
    </div> 
) 
} 

Text.defaultProps = { 
    isBold: false, 
    isExtraSpaced: false, 
    isExtraBold: false, 
    children: '', 
    color: '', 
    ellipsis: false, 
    size: 'extraExtraSmall', 
    isUpperCase: false, 
    onClick: undefined, 
    style: {}, 
    active: false, 
} 

Text.propTypes = { 
    isBold: bool, 
    isExtraSpaced: bool, 
    isExtraBold: bool, 
    children: any, 
    color: string, 
    ellipsis: bool, 
    size: string, 
    isUpperCase: bool, 
    onClick: func, 
    style: object, 
    active: bool, 
} 

export default Text 

Comme vous pouvez le voir, l'intention est que vous passez des accessoires pour changer la mise en page le texte. L'idée est que vous ne finissez jamais avec un nombre limité de styles pour le texte, et vous ne finissez jamais avec de légères variations.

Un exemple de l'utilisation de ce composant dans mon projet ressemble à ceci:

<Text 
    onClick={() => this.handleGlobalChangeDate(Number(n))} 
    isBold 
    size="medium" 
    color="primary" 
    active={Number(n) === activeDay && visibleMonth === activeMonth} 
>{n}</Text> 

Cela semble désordonnée, et je me sens comme isBold, size, color etc ne devrait pas besoin d'être affiché ici et passé dans comme accessoires. Au contraire, ils devraient être traités dans le CSS et se référer au fichier variables.css du projet.

De cette façon je voudrais pouvoir attacher un className au composant Text en question.

Cependant, parce que c'est un composant et pas simplement un div, par exemple, le className serait simplement passé au composant comme accessoire.

Comment puis-je utiliser CSS pour résoudre ce problème au lieu d'utiliser une multitude d'accessoires liés au style?

Answer 1

Essayez classnames, un excellent moyen d'ajouter des classes dynamiquement en fonction des accessoires ou de l'état.

vous pouvez avec ce faire:

var btnClass = classNames({ 
    btn: true, 
    'btn-pressed': this.state.isPressed, 
    'btn-over': !this.state.isPressed && this.state.isHovered 
}); 
return <button className={btnClass}>{this.props.label}</button>; 

Appliquez ensuite dans votre composant:

<div className={btnClass}>Something</div>