小编Bra*_*kle的帖子

CSS模块组成

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

这是我们的组件:

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)
Run Code Online (Sandbox Code Playgroud)

到目前为止这是样式表:

@import "~components/styles/variables"

.button
  color: $button-default
  background-color: transparent
  font-family: $font-family …
Run Code Online (Sandbox Code Playgroud)

sass reactjs css-modules

6
推荐指数
1
解决办法
1413
查看次数

标签 统计

css-modules ×1

reactjs ×1

sass ×1