react-with-styles 使用教程

react-with-styles 使用教程

react-with-stylesUse CSS-in-JavaScript with themes for React without being tightly coupled to one implementation项目地址:https://gitcode.com/gh_mirrors/re/react-with-styles

项目介绍

react-with-styles 是一个由 Airbnb 开发的开源项目，旨在帮助开发者在 React 组件中使用 CSS-in-JavaScript 的方式进行样式定义，同时不与特定的实现（如 Aphrodite、Radium 或 React Native）紧密耦合。通过 react-with-styles，开发者可以轻松访问共享的主题信息（如颜色、字体），并在定义样式时使用这些信息。

项目快速启动

安装

首先，你需要安装 react-with-styles 及其相关依赖：

npm install react-with-styles aphrodite

创建主题模块

创建一个模块，导出一个包含共享主题信息的对象：

// theme.js
export default {
  color: {
    primary: '#FF5A5F',
    secondary: '#00A699',
  },
};

注册主题和接口

在你的应用入口文件中注册主题和接口：

// index.js
import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import aphroditeInterface from 'react-with-styles-interface-aphrodite';
import theme from './theme';

ThemedStyleSheet.registerTheme(theme);
ThemedStyleSheet.registerInterface(aphroditeInterface);

使用样式

在你的组件中使用 withStyles 定义样式，并使用 css 消费这些样式：

// MyComponent.js
import React from 'react';
import PropTypes from 'prop-types';
import { css, withStyles } from 'react-with-styles';

function MyComponent({ styles }) {
  return (
    <div>
      <a href="/somewhere" css={styles.firstLink}>A link to somewhere</a>
      {' '}
      and
      {' '}
      <a href="/somewhere-else" css={styles.secondLink}>a link to somewhere else</a>
    </div>
  );
}

MyComponent.propTypes = {
  styles: PropTypes.object.isRequired,
};

export default withStyles(({ color }) => ({
  firstLink: {
    color: color.primary,
  },
  secondLink: {
    color: color.secondary,
  },
}))(MyComponent);

应用案例和最佳实践

自定义样式属性名

你可以通过设置 stylesPropName 选项来自定义样式属性的名称：

// MyComponent.js
import React from 'react';
import { css, withStyles } from 'react-with-styles';

function MyComponent({ withStylesStyles }) {
  return (
    <div css={withStylesStyles.container}>
      Try to be a rainbow in someone's cloud
    </div>
  );
}

export default withStyles(({ color, unit }) => ({
  container: {
    color: color.primary,
    marginBottom: 2 * unit,
  },
}), { stylesPropName: 'withStylesStyles' })(MyComponent);

使用主题属性

你也可以通过设置 themePropName 选项来自定义主题属性的名称：

// MyComponent.js
import React from 'react';
import { css, withStyles } from 'react-with-styles';

function MyComponent({ styles, withStylesTheme }) {
  return (
    <div css={styles.container}>
      <Background color={withStylesTheme.color.primary}>
        Try to be a rainbow in someone's cloud
      </Background>
    </div>
  );
}

export default withStyles(({ color, unit }) => ({
  container: {
    color: color.primary,
    marginBottom: 2 * unit,
  },
}), { themePropName: 'withStylesTheme' })(MyComponent);

典型生态项目

eslint-plugin-react-with-styles

eslint-plugin-react-with-styles 是一个 ESLint 插件，用于检查和规范 react-with-styles 的使用。你可以通过以下命令安装：

npm install eslint-plugin-react-with-styles

在 .eslintrc 文件中配置该插件

react-with-stylesUse CSS-in-JavaScript with themes for React without being tightly coupled to one implementation项目地址:https://gitcode.com/gh_mirrors/re/react-with-styles