私は誰かが私を助けてくれることを望んでいる構図について質問があります。 私はSassとreact-css-modules
を使用しています。基本的なボトムレベルのコンポーネントの1つを構成する最善の方法を知りたいと思います。ここでCSSモジュールの構成
が私たちのコンポーネントです:
import React, {PropTypes} from 'react'
import cssModules from 'react-css-modules'
import styles from './style.sass'
const Button = ({children = 'Submit', ...props}) => {
const align = props.align ? `-${props.align}` : ''
const type = props.type ? `-${props.type}` : ''
const styleName = `button${type}${align}`
return (
<button onClick={props.onClick} {...props} styleName={styleName}>
{children}
</button>
)
}
Button.propTypes = {
align: PropTypes.string,
onClick: PropTypes.func.isRequired,
type: PropTypes.string,
}
export default cssModules(Button, styles)
そしてここでは、これまでのスタイルシートです:今
@import "~components/styles/variables"
.button
color: $button-default
background-color: transparent
font-family: $font-family
font-size: $default-font-size
font-weight: $font-regular
line-height: $default-button-height
margin: 0 $pad 0 0
outline: none
padding: 0 $pad*2
.left
float: left
.right
float: right
.primary
color: $background-interaction
background-color: $button-default
.button-left
composes: button, left
.button-right
composes: button, right
.button-primary
composes: button, primary
.button-primary-left
composes: button, primary, left
.button-primary-right
composes: button, primary, right
、それはかなり痛いです。私たちが指数関数的に追加する構成可能な小道具は、私たちが提供しなければならない構成されたクラスの数を増加させます。現在align
とtype
を設定することができ、どちらもnullになる可能性があるため、6つの組み合わせがあるため、.button
のベースに加えて5つの作成クラスを作成します。 小道具をもう1つだけ追加した場合、ブール値bold
と言うと、新しい構成クラス名を追加する必要があります:.button-bold, .button-left-bold, .button-right-bold, .button-primary-bold, .button-primary-left-bold, .button-primary-right-bold
。
私はreact-css-modules
と知っています。allowMultiple
設定を有効にして、要素に適用する複数のモジュールを指定できるようにすることができますが、それはベストプラクティスに反するものです。私はのように感じて、には何かが不足していると感じます。私たちは何を間違っていますか?
このような素晴らしい答えはありがとう!私は実際にあなたの答えのようなCSSモジュールについての貴重なガイドラインやベストプラクティスを見つけるのに苦労しています。お勧めするリソースがありますか? – Azuli42