51seven/react-classname-module

语言: JavaScript

git: https://github.com/51seven/react-classname-module

使用className轻松编写CSS模块
Write CSS Modules painless with className
README.md (中文)

React Classname Module允许您为CSS模块编写类名,就像没有CSS模块一样简单。它是用类名构建的,所以你有一个简单而强大的方法来编写你的类名。

注意:这是目前的0.x版本。这实际上意味着它在我们的项目中起作用,但我们太忙了,无法编写测试以确保它在您的项目中也能正常工作。

安装

npm install --save react-classname-module

怎么样?

看这个例子。哎呀,真糟糕!

import React from "react";
import styles from "styles.css";

class MyComponent extends React.Component {
  render() {
    return (
      <div className={styles.head}>
        <h1 className={styles["headline--h1"]}>Lorem ipsum</h1>
        <div className={styles.content}>
          ...
        </div>
      </div>
    );
  }
}

export default MyComponent;

使用React Classname Module,您只需编写这段漂亮的小代码:

import React from "react";
import cm from "react-classname-module";
import styles from "styles.css";

class MyComponent extends React.Component {
  render() {
    return (
      <div className="head">
        <h1 className="headline--h1">Lorem ipsum</h1>
        <div className="content">
          ...
        </div>
      </div>
    );
  }
}

export default cm(MyComponent, styles);

就是这样。

特征

  • 支持本地和全局类名
  • 适用于无状态组件
  • 适用于多个类:className =“btn btn-highlight”
  • 使用类名

不支持(目前)

  • 相同的本地和全球类名
  • 在React组件上合并className:   例如<Foo className =“bar”/>将使用CSS模块“bar”覆盖Components className

支持类名

您可以将典型的类名对象传递给它,而不是将字符串写入类名。

let classnames = {
  foo: true,
  bar: true,
  "foo-bar": false
}

<div className={classnames}></div>

更新日志

v0.1.1

  • 修复了无状态组件中缺少defaultProps和propTypes的问题

v0.1.0

  • 删除了愚蠢的死代码
  • 支持无状态组件

v0.0.1

  • 初始版本

本文使用googletrans自动翻译,仅供参考, 原文来自github.com

en_README.md

React Classname Module allows you to write your classnames for CSS Modules as easy as without CSS Modules. It's build with classnames, so you have a simple and powerful way to write your classnames.

Notice: This is currently a 0.x version. What this actually means is that it works in our project but we're too busy to write tests to be sure that it'll work in your project, too.

Install

npm install --save react-classname-module

How?

See this example. Yuck, it sucks!

import React from "react";
import styles from "styles.css";

class MyComponent extends React.Component {
  render() {
    return (
      <div className={styles.head}>
        <h1 className={styles["headline--h1"]}>Lorem ipsum</h1>
        <div className={styles.content}>
          ...
        </div>
      </div>
    );
  }
}

export default MyComponent;

With React Classname Module you can simply write this nice little piece of code:

import React from "react";
import cm from "react-classname-module";
import styles from "styles.css";

class MyComponent extends React.Component {
  render() {
    return (
      <div className="head">
        <h1 className="headline--h1">Lorem ipsum</h1>
        <div className="content">
          ...
        </div>
      </div>
    );
  }
}

export default cm(MyComponent, styles);

And that's it.

Features

  • Supports local and global classnames
  • Works with stateless Components
  • Works with multiple classes: className="btn btn-highlight"
  • Works with classnames

Doesn't support (currently)

  • identical local and global classnames
  • merging className on a React Component:
    e.g. <Foo className="bar" /> will override the Components className with the CSS Module "bar"

Supporting classnames

Instead of writing a string into classname, you can pass a typical classnames object into it.

let classnames = {
  foo: true,
  bar: true,
  "foo-bar": false
}

<div className={classnames}></div>

Changelog

v0.1.1

  • Fixed missing defaultProps and propTypes in stateless Components

v0.1.0

  • Removed silly dead code
  • Support for stateless components

v0.0.1

  • initial version