# @friendsofreactjs/react-css-themr 中文文档

规范地址：https://npmcn.com/package/%40friendsofreactjs/react-css-themr/

版本：4\.3\.3
npm 元数据更新时间：2022-04-05T12:44:38.628Z
中文译文更新时间：2026-11-15T14:16:09.536Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40friendsofreactjs/react-css-themr
原文对照：https://npmcn.com/package/%40friendsofreactjs/react-css-themr/?lang=original
项目主页：https://github.com/FriendsOfReactJS/react-css-themr#readme
源码仓库：https://github.com/FriendsOfReactJS/react-css-themr

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：72.2 kB，16 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：react ^15\.0\.0-0 \|\| ^16\.0\.0
- 首次发布：2018-08-02T09:59:07.000Z
- 最新版本发布：2021-04-08T07:37:24.363Z
- 近 30 天下载量：6470（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：29（近 12 个月 0 个）

## 中文简介

反应JS之友:反应CSS 主题

## 安装

```sh
npm install @friendsofreactjs/react-css-themr
```

也可以使用：`pnpm add @friendsofreactjs/react-css-themr`、`yarn add @friendsofreactjs/react-css-themr`、`bun add @friendsofreactjs/react-css-themr`

## README

 [![npm version](https://img.shields.io/npm/v/@friendsofreactjs/react-css-themr.svg?style=flat-square)](https://www.npmjs.com/package/@friendsofreactjs/react-css-themr)[![monthly downloads from npm](https://img.shields.io/npm/dm/@friendsofreactjs/react-css-themr.svg?style=flat-square) ](https://www.npmjs.com/package/@friendsofreactjs/react-css-themr)[![Travis CI Build Status](https://img.shields.io/travis/FriendsOfReactJS/react-css-themr/master.svg?style=flat-square&label=Travis+CI) ](https://travis-ci.org/FriendsOfReactJS/react-css-themr)[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square) ](https://github.com/prettier/prettier)[![We are using semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square) ](https://github.com/semantic-release/semantic-release)[![Known Vulnerabilities](https://snyk.io/test/github/FriendsOfReactJS/react-css-themr/badge.svg?targetFile=package.json)](https://snyk.io/test/github/FriendsOfReactJS/react-css-themr?targetFile=package.json) [![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/friends-of-reactjs)

# 反应之友: 反应 CSS 主题

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

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

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

## 为什么?

使用时 [CSS 模块](https://github.com/css-modules/css-modules) 样式,通常从同一组件导入类名对象。 由于cs类是默认的范畴,所以很难使您的组件适合外部世界定制.

## 办法

从 [未来反应](https://github.com/nikgraf/future-react-ui) 财务报告和审定财务报表 [反应主题](https://github.com/markdalgleish/react-themeable),应当运送组件 **无** 样式。 这意味着我们可以把风格看作是一种 **可注射依赖性**在 CSS 模块中,您可以将导入的类名对象视为一个 **主题** 用于组件。 因此,每个有样式的组成部分都应界定一个 _类名 API_ 用于渲染函数.

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

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

## 合并CSS模块

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

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

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

## 怎么会这样?

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

```jsx
// 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,它包含三个类名:按钮,图标和内容. 现在,一个组件可以使用一个有成功主题的按钮,例如:

```jsx
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会 **永远** 捆绑 :

```jsx
// 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;
```

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

```jsx
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` 比如说:

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

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

### 背景主题

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

```jsx
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` 在第二个参数中。 它应该返回您想要通过的财产 .

## 捐款

我们很希望你能贡献给反应药剂师 首先,请阅读我们的 [贡献指南](https://npmcn.com/package/%40friendsofreactjs/react-css-themr/CONTRIBUTING.md) 财务报告和审定财务报表 [行为守则](https://npmcn.com/package/%40friendsofreactjs/react-css-themr/CODE_OF_CONDUCT.md#code-of-conduct)。 。 。 .

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

因此,第一条规则是遵循 [eslint 承诺消息指南](https://github.com/conventional-changelog-archived-repos/conventional-changelog-eslint/blob/master/convention.md)。 。 。 . 当你总是通过承诺 `yarn commit` 这真的很简单。 仆人将指引你.

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

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

### 开发命令

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

| 命令 | 说明 |
| --- | --- |
| `yarn build` | 运行开发建设. |
| `yarn lint` | 执行linter,我们用更漂亮的 Eslint. |
| `yarn test` | 执行所有源文件中的笑话测试 . |
| `yarn test:watch` | 写作测试时很完美 是测试的观察者. |
| `yarn commit` | 执行承诺 引导你正确的承诺信息. |

## 关于

此工程最初作者为: [贾维·维拉斯科](https://twitter.com/javivelasco) 提供更好的定制经验 [反应工具箱](http://react-toolbox.io/)高度赞扬任何评论、改进或反馈.

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

感谢 [尼克・格拉夫](http://www.twitter.com/nikgraf) 财务报告和审定财务报表 [马克·达尔格利什](http://www.twitter.com/markdalgleish) 他们对反应组件的主题和定制的想法.

## 许可证

本项目的许可条件如下: [麻省理工学院许可证](https://github.com/FriendsOfReactJS/@friendsofreactjs/react-css-themr/blob/master/LICENSE)。 。 。 .

## 常见问题

### @friendsofreactjs/react-css-themr 是什么？

反应JS之友:反应CSS 主题

### 如何安装 @friendsofreactjs/react-css-themr？

在项目目录运行 npm install @friendsofreactjs/react-css-themr，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^15\.0\.0-0 \|\| ^16\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @friendsofreactjs/react-css-themr 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @friendsofreactjs/react-css-themr 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @friendsofreactjs/react-css-themr 可以商用吗？

@friendsofreactjs/react-css-themr 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @friendsofreactjs/react-css-themr 的下载量有多少？

根据 npm 官方下载统计，@friendsofreactjs/react-css-themr 在 2026/10/16 – 2026/11/14 这 30 天内被下载 6,470 次，日均约 216 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @friendsofreactjs/react-css-themr 还在维护吗？

最新版本 4\.3\.3 发布于 2021/04/08（5 年前）；至今共发布 29 个版本，其中过去 12 个月发布了 0 个；首次发布于 2018/08/02。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。