ConfigProvider 通过Context配置Next组件通用的前缀

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/base@latest -S

开发指南

何时使用

Next 组件 className 的默认前缀都是 'next-' ，如 'next-btn'，你可能在以下两种情况下想改变这个默认前缀：

• 自定义组件品牌，如 'my-btn'，'my-select'

• 一个页面中同时引入两个主题，防止相同类名样式互相覆盖

基本使用

在应用中使用

• 为你的应用包裹 ConfigProvider，并设置相应的 prefix

entry.jsx

class App extends React.Component {
    render() {
        return (
            <ConfigProvider prefix="my-">
                <div>
                    <Input />
                    <Button>Submit</Button>
                </div>
            </ConfigProvider>
        );
    }
}

• scss入口文件中在引入主题scss文件前，设置$css-prefix

entry.scss

$css-prefix: "my-";
@import "~@alife/dpl-xxx/index.scss";

如何让组件支持 ConfigProvider ？

组件的 prefix 支持从 context 中获取：

class App extends React.Component {
    static contextTypes = {
        prefix: React.PropTypes.string
    };
    render() {
        const prefix = this.context.prefix;
        return (
            <span className={`${prefix}app`}>
                <a className={`${prefix}app-link`}>link</a>
            </span>
        );
    }
}

API

通过Context配置Next组件通用的前缀

代码示例

基本

最简单的用法。

查看源码在线预览

import { ConfigProvider } from "@icedesign/base";
/* eslint-disable react/no-multi-comp */
/* eslint-disable react/prefer-stateless-function */
class Demo extends React.Component {
  static contextTypes = {
    prefix: React.PropTypes.string
  };
  static propTypes = {
    prefix: React.PropTypes.string
  };
  render() {
    const prefix = this.context.prefix || this.props.prefix;
    return <span className={`${prefix}btn`}>{prefix}</span>;
  }
}
class App extends React.Component {
  state = {
    prefix: "a-"
  };
  handleToggle() {
    this.setState({
      prefix: this.state.prefix === "a-" ? "b-" : "a-"
    });
  }
  render() {
    return (
      <ConfigProvider prefix={this.state.prefix}>
        <div>
          <button
            className="toggle-prefix"
            type="primary"
            style={{ marginRight: "10px" }}
            onClick={this.handleToggle.bind(this)}
          >
            切换前缀
          </button>
          <Demo />
        </div>
      </ConfigProvider>
    );
  }
}
ReactDOM.render(<App />, mountNode);

.toggle-prefix {
    width: 100px;
    height: 40px;
    border: 1px solid #999;
    border-radius: 3px;
    background: #FFF;
    font-size: 14px;
    outline: none;
    cursor: pointer;
}
.a-btn {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    border-radius: 3px;
    background: red;
}
.b-btn {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    border-radius: 3px;
    background: blue;
}

相关区块

暂无相关区块