は私のプロジェクトで

Question

をCSSモジュールを使用した小道具を反応して、私は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 

を、意図は、あなたがのレイアウトを変更する小道具を渡すということですテキスト

考えられるのは、テキストのスタイルが限られていることになり、少しばらつきが生じることがないということです。

私のプロジェクトでは、このコンポーネントの使用例は次のようになります。

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

これは乱雑に見える、と私はisBold、size、colorなどのように感じるここに表示され、中に渡される必要はありません小道具として。むしろ、CSSで処理し、プロジェクトのvariables.cssファイルを参照する必要があります。

このように、TextコンポーネントにclassNameを添付したいと思います。

しかし、これはコンポーネントであり、たとえばdivではないため、classNameは単にコンポーネントとしてプロップとして渡されます。

多くのスタイル関連の小道具を使用する代わりに、この問題に対処するためにCSSを使用するにはどうすればよいですか？

Answer 1

classnamesを試してください。これは、小道具や状態に基づいてクラスを動的に追加する優れた方法です。あなたが行うことができます。これにより

：

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

は、その後、あなたのコンポーネントに適用されます。

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