reactjs – CSS模块组成

我有一个关于作文的问题,我希望有人可以帮助我.
我正在使用带有Sass的react-css-modules,我想知道为我们的一个基本底层组件编写内容的最佳方法.

这是我们的组件：

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,right

现在,这很痛苦.我们添加的每个可配置道具都会以指数方式增加我们必须提供的合成类的数量.我们当前可以配置align和type,因为两者都可以为null,所以我们有6种可能的组合,因此除了base .button之外还要创建5个类.
如果我们只添加一个道具,比如只是一个布尔粗体,我们现在必须添加一大堆新的组合类名：.button-bold,.button-left-bold,.button-right-bold,.button- primary-bold,.button-primary-left-bold,.button-primary-right-bold.

我知道使用react-css-modules,我们可以启用allowMultiple设置,允许我们指定多个模块应用于元素,但我的理解是反对最佳实践.我觉得我们必须在这里遗漏一些东西.我们做错了什么？

解决方法

我想也许这个例子中存在各种各样的问题,这就是为什么它不符合“每个元素一个类”的规则.为每个元素规则强制执行一个类的原因之一是,我们可以轻松地更改元素状态的外观而不实际触及元素. (基本上是CSS本身的承诺,最终实现了.)如果元素上有多个类,则很难在不更改元素的情况下控制外观.如果使用外观(而不是语义)类,则尤其如此.

像“button-primary-left-bold”这样的类具有一些语义含义(“button-primary”),但它也有一些布局含义(“left”)和一些文本外观含义(“bold”). Button组件可能没有业务控制自己的布局.请记住,您也可以编写React组件！所以你可以有更多的东西：

<Left><Button type="primary">Click Me!</Button></Left>

现在,Button组件的CSS模块可以担心按钮的类型. Button组件可以在任何地方使用,可以使用任何布局,而不仅仅是基于浮动的布局.

更好的是,浮动也可以被推入更加语义的组件中.也许是这样的：

<ButtonBar>
  <Button>Cancel</Button>
  <Button type="primary">Save</Button>
</ButtonBar>

ButtonBar可以有自己的CSS模块来完成布局.之后你可以换掉那个时髦的浮动布局,以获得时髦的flexBox布局.

上一篇：我可以使用css伪选择器将一些文本包下一篇：css – 如何禁用兄弟元素之间的边距

reactjs – CSS模块组成

解决方法

猜你在找的CSS相关文章