反应之友: 反应 CSS 主题

CSS模块的简单主题和组成.

$ npm install --save @friendsofreactjs/react-css-themr

注:高度赞赏对文件的反馈和贡献.

为什么?

使用时 CSS 模块 样式,通常从同一组件导入类名对象。 由于cs类是默认的范畴,所以很难使您的组件适合外部世界定制.

办法

从 未来反应 财务报告和审定财务报表 反应主题,应当运送组件 无 样式。 这意味着我们可以把风格看作是一种 可注射依赖性在 CSS 模块中,您可以将导入的类名对象视为一个 主题 用于组件。 因此,每个有样式的组成部分都应界定一个 类名 API 用于渲染函数.

提供类名对象的最直接方式是通过 道具。如果您想要导入一个主题已经注入的组件,则您必须写一个执行此任务的更高排序组件。 这对你自己的部件是好的, 但对于ui -kits喜欢 反应工具箱 或者说 贝儿,您需要为每一个您想要使用的组件写一个包装. 在这种花花公子中,你可以将主题理解为 设定 的分类。 将它们组合在一个单一对象中,并用上下文通过组件树移动,这是有道理的. 这样,您也可以通过 上下文, (中文(简体) ), 特设 或者说 道具。 。 。 .

@friendsofreactjs/react-cs-themr的取向包括: 提供者 (单位:千美元) 装饰。提供者设置了上下文主题。 装饰器在您组件中添加了逻辑,以便根据配置,上下文和道具的不同,确定应该使用哪个主题或者应该如何组成.

合并CSS模块

您的组件可能有三种来源 。 按优先排序 : 上下文, (中文(简体) ), 配置 财务报告和审定财务报表 道具任何人可能都不见了 如果存在多个主题,您可能想要以三种不同的方式来构成最终类名对象:

• 覆盖:具有最高优先级的主题对象为所使用.
• 软合并:主题对象被合并,但如果一个密钥存在于多个对象中,则最终值对应具有最高优先级的主题.
• 深入合并:主题对象被合并,如果一个密钥在多个对象中存在,则每个对象的值被调和.

随所取取. 我们认为最后一个是最灵活的 所以它被选中了 默认。 。 。 .

怎么会这样?

说你有个 Button 您想要使主题化的组件。 您应该通过一个独特的名称标识符, 用于从上下文中检索其主题, 以防其存在 .

// Button.js
import React, { Component } from 'react';
import { themr } from '@friendsofreactjs/react-css-themr';

@themr('MyThemedButton')
class Button extends Component {
  render() {
    const { theme, icon, children } = this.props;
    return (
      <button className={theme.button}>
        { icon ? <i className={theme.icon}>{icon}</i> : null}
        <span className={theme.content}>{children}</span>
      </button>
    )
  }
}

export default Button;

该组件正在定义用于主题的API,它包含三个类名:按钮,图标和内容. 现在,一个组件可以使用一个有成功主题的按钮,例如:

import Button from './Button';
import successTheme from './SuccessButton.css';

export default (props) => (
  <div {...props}>
    <p>Do you like it?</p>
    <Button theme={successTheme}>Yeah!</Button>
  </div>
);

默认主题

如果使用带有基准主题的组件,您可能想要导入带有已注入主题的组件。 然后可以通过道具用另一个主题对象来作曲它的风格. 在这种情况下,基础Cs会 永远 捆绑 :

// SuccessButton.js
import React, { Component } from 'react';
import { themr } from '@friendsofreactjs/react-css-themr';
import successTheme from './SuccessButton.css';

@themr('MySuccessButton', successTheme)
class Button extends Component {
  render() {
    const { theme, icon, children } = this.props;
    return (
      <button className={theme.button}>
        { icon ? <i className={theme.icon}>{icon}</i> : null}
        <span className={theme.content}>{children}</span>
      </button>
    )
  }
}

export default Button;

想象一下你想让成功按钮大写一个特定案件。 您可以包括与其他类名混合的类名:

import React from 'react';
import SuccessButton from 'SuccessButon';
import style from './Section.css';

export default () => (
  <section className={style.section}>
    <SuccessButton theme={style}>Yai!</SuccessButton>
  </section>
);

和成为 Section.css 比如说:

.section { border: 1px solid red; }
.button  { text-transform: uppercase; }

最终类名对象 Button 组件将包括来自 SuccessButton.css 财务报告和审定财务报表 Section.css 所以这是大写!

背景主题

虽然上下文主题并不限于"ui-kits",但是避免为每个组件宣布专有,是非常有用的. 例如,在 反应工具箱,可以定义上下文主题,例如:

import React from 'react';
import { render } from 'react-dom';
import { ThemeProvider } from '@friendsofreactjs/react-css-themr';
import App from './app'

const contextTheme = {
  RTButton: require('react-toolbox/lib/button/style.scss'),
  RTDialog: require('react-toolbox/lib/dialog/style.scss')
};

const content = (
  <ThemeProvider theme={contextTheme}>
    <App />
  </ThemeProvider>
);

render(content, document.getElementById('app'));

主要思想是通过上下文为每个组件注入类名对象. 这样你就可以把整个主题放在一个单一的地方,并忘记将风格纳入每一个要求. 任意 Button 或者说 Dialog 组件将使用上下文提供的样式.

API 密码

<ThemeProvider theme>

提供a theme 上下文用于样式组件。 主题对象的形状包括一个对象,其密钥是带有下列条件的样式组件的标识符: themr 函数,每个主题作为相应的值。 有用吗.

themr(Identifier, [defaultTheme], [options])

回返a function 将组件包成可主题.

返回的组件接受 a theme, (中文(简体) ), composeTheme, (中文(简体) ), innerRef 财务报告和审定财务报表 mapThemrProps 道具除去原部件道具. 前两个用来提供 theme 到组件并配置样式组成,样式组成也可以通过选项进行配置. innerRef 用于向装饰部件传递回调 mapThemrProps 是可用于将属性映射到被装饰的组件的函数。 函数参数为:

• Identifier (叫声) 用于为用于从上下文获取主题的组件提供一个独特的标识符.
• [defaultTheme] (单位:千美元)对象)是从 CSS 模块中解析的类名对象。 它将作为默认主题来计算将传递给组件的新主题.
• [options] (单位:千美元)对象如果指定它允许自定义行为 :
  • [composeTheme = 'deeply'[ . ] (叫声) 允许自定义主题合并的方式或完全禁用合并。 公认的价值观是: deeply 将主题深度合并, softly 以柔和地合并主题和 false 以禁用主题合并.
  • [mapThemrProps = (props, theme) => ({ ref, theme })[ . ] (职能) 允许自定义属性如何传递到装饰组件。 默认情况下,他们提取所有自己的属性 innerRef 作为 ref 和生成的主题为 theme。如果您正在装饰需要映射引用或任何其他自定义属性的组件,则此函数将使用 全部 给组件的属性加生成的属性 theme 在第二个参数中。 它应该返回您想要通过的财产 .

捐款

我们很希望你能贡献给反应药剂师 首先,请阅读我们的 贡献指南 财务报告和审定财务报表 行为守则。 。 。 .

我们尽量让事情变得简单. 我们用语义释放 有更多的时间 专注于重要的东西 而不是在依赖中挣扎 或释放地狱.

因此,第一条规则是遵循 eslint 承诺消息指南。 。 。 . 当你总是通过承诺 yarn commit 这真的很简单。 仆人将指引你.

所有公关将合并入开发分公司. 当我们把开发合并为主人 trvis和语义发布会构建出一个新的发布.

所以没有人可以直接推入主人!

开发命令

我们有一些线性剧本 应该让生活更容易。 部署脚本只是用于 语义 -释放和travis, 但以下会帮助你.

关于

此工程最初作者为: 贾维·维拉斯科 提供更好的定制经验 反应工具箱高度赞扬任何评论、改进或反馈.

我们感谢Javi Velasco所作的一切努力并创立了这样一个伟大的一揽子计划。 包裹 javivelasco/react-css-themr 因此反应的朋友会继续.

感谢 尼克・格拉夫 财务报告和审定财务报表 马克·达尔格利什 他们对反应组件的主题和定制的想法.

许可证

本项目的许可条件如下: 麻省理工学院许可证。 。 。 .