react-styleable, 为便携样式响应组件

分享于 

4分钟阅读

GitHub

  繁體 雙語
React Component for portable styles
  • 源代码名称:react-styleable
  • 源代码网址:http://www.github.com/pluralsight/react-styleable
  • react-styleable源代码文档
  • react-styleable源代码下载
  • Git URL:
    git://www.github.com/pluralsight/react-styleable.git
    Git Clone代码到本地:
    git clone http://www.github.com/pluralsight/react-styleable
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/pluralsight/react-styleable
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    响应 styleable

    一致的,易于覆盖的CSS模块的React组件

    安装

    
    npm install react-styleable --save-dev
    
    
    
    

    用法

    在道具中的风格

    react-styleable 使你的CSS模块中的样式在 props.css 上可用。

    编写你的样式表,所有的好处, css模块的好处。 例如:

    .list {
     list-style: none;
     padding-left: 0;
     margin: 10px;
    }.item {
     outline: 1pxsolidred;
     padding: 10px;
    }

    然后在可以重用组件中,将 React.Component 包装为 react-styleable 高阶的。

    importstyleablefrom'react-styleable'importcssfrom'./my-list.css'classMyListextendsReact.Component {
     renderItem(item, i) {
     return (
     <li key={i} className={this.props.css.item}>{item}</li> )
     }
     renderList(items) {
     returnitems.map(this.renderItem)
     }
     render() {
     return (
     <ul className={this.props.css.list}> {this.renderList(this.props.items)}
     </ul> )
     }
    }exportdefaultstyleable(css)(MyList)

    作为装饰器的用法也很不错:

    @styleable(css)classMyListextendsReact.Component { /*.. . */ }

    你的MyList 组件现在已经设置样式并可以显示 !

    重写组件样式

    这是最大的回报。

    如果要将这种组件的样式替换为消费者,可以通过相同的接口轻松地完成这里操作。 首先,定义一个新样式表:

    .item {
     outline: 1pxsolidblue;
    }

    使用它再次呈现 MyList,通过 props.css 道具传递你的新样式表:

    importMyListfrom'./my-list'importcssfrom'./client.css'React.render(<MyList css={css} />, document.getElementById('app'))

    现在 .item的轮廓将是蓝色而不是原始的红色。

    组合组件样式

    如果不仅仅是重写这些样式,你想要用样式组合来加入它们,也可以做到这一点。

    一种方法是通过CSS模块'composes 关键字。 在你的新样式表中:

    .item {
     composes: item from "./my-list.css";
     background: pink;
    }

    原来的红色轮廓将保留下来,同时也会出现一个粉红色的background。 这是最安全的方式来编写样式,因为它允许你保证级联的顺序。

    但它的缺点是必须找到原始的样式表位置。

    如果你对级联顺序和选择器特性有足够的保证,那么你可以通过使用 compose api来完成相同的事情:

    importMyListfrom'./my-list'importcssfrom'./client.css'React.render(<MyList css={{ compose: css }} />, document.getElementById('app'))

    样式。可移植。易于覆盖所以,很好。


    COM  react  component  style  portable  样式