工具

Babel 插件

此插件添加了对服务器端渲染、样式压缩和更好的调试体验的支持。

用法

首先安装 babel-plugin

npm install --save-dev babel-plugin-styled-components

然后像这样将其添加到你的 babel 配置中

注意

⚠️ 你的 .babelrc 文件中插件调用顺序很重要。如果你在你的 babel 配置中使用 env 属性，那么将此插件放入 plugins 数组中是不够的。相反，它需要被放入每个 env 的 plugins 数组中，以确保它首先被执行。更多信息请参见这里。

{
  "plugins": ["babel-plugin-styled-components"]
}

服务器端渲染

通过为每个 styled 组件添加一个唯一的标识符，此插件避免了由于客户端和服务器上的不同类生成而导致的校验和不匹配。如果你不使用此插件并尝试服务器端渲染 styled-components，React 会在重新水合期间用 HTML 属性不匹配警告抱怨。

如果需要，你可以使用 ssr 选项将其禁用

{
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "ssr": false
      }
    ]
  ]
}

更好的调试

此选项使用更丰富的输出来增强附加到每个组件的 CSS 类名，以帮助识别 DOM 中的组件，而无需 React DevTools。在你的页面源代码中，你会看到：<button class="Button-asdf123 asdf123" /> 而不是仅仅 <button class="asdf123" />。

它还允许你查看 React DevTools 中组件的 displayName。例如，考虑编写一个渲染 button 元素的 styled 组件，称为 MyButton。它通常在 DevTools 中显示为 styled.button，但启用了 displayName 选项后，它具有你为其指定的名称：MyButton。

这使得查找你的组件并弄清楚它们在你的应用程序中的位置变得更加容易。

如果你不需要此功能，可以使用 displayName 选项将其禁用

{
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "displayName": false
      }
    ]
  ]
}

控制组件的 `displayName`

默认情况下，组件的 displayName 将以文件名作为前缀，以使组件名称尽可能唯一。

你可以通过禁用 fileName 选项，强制组件的 displayName 仅为组件名称

{
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "fileName": false
      }
    ]
  ]
}

你可能想要这样做的一个例子是使用 enzyme 测试组件。虽然你可以始终使用 .find(ComponentName)，但使用 .find("ComponentName") 通过 displayName 搜索组件是完全可能的。在后一种情况下，你需要禁用 fileName 选项。如果你只想在测试时这样做，请确保只在你的测试环境下添加它。

控制哪些文件名没有意义

一个常见的模式是将组件放在 Button/index.jsx 中，而不是 Button.jsx 中。默认情况下，如果 fileName 选项设置为 true，插件将使用目录名 (<button class="Button-asdf123 asdf123" />) 而不是文件名 (<button class="index-asdf123 asdf123" />) 生成显示名称，因为前者提供了更多信息。

meaninglessFileNames 选项允许你自定义与 styled 组件功能描述无关的文件名列表，因此应使用目录名而不是文件名

{
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "meaninglessFileNames": ["index", "styles"]
      }
    ]
  ]
}

例如，将 styles 添加到列表中将使你能够将 styled 组件存储在 Button/styles.js 文件中。

此选项默认为 ["index"]。

如果 fileName 或 displayName 设置为 false，此选项将无效。

压缩

此插件执行两种类型的压缩：一种从你的 CSS 中删除所有空格和注释，另一种转译标记模板文字，避免你的捆绑包中包含宝贵的字节。

如果需要，可以通过 babel 配置禁用此行为

{
  "plugins": [
    ["babel-plugin-styled-components", {
      "minify": false,
      "transpileTemplateLiterals": false
    }]
  ]
}

死代码消除

由于 styled 组件的转译和构建方式，默认情况下压缩器无法对它们正确执行死代码消除，因为它们被认为具有副作用。但是，有一个功能可以启用，以帮助此过程，称为“纯注释”。

{
  "plugins": [
    ["babel-plugin-styled-components", {
      "pure": true
    }]
  ]
}

它利用一个 babel 辅助函数，用 #__PURE__ JS 注释标记每个 styled 组件和库辅助函数，一些压缩器使用这些注释来克服上述问题。

模板字符串转译

此插件将 styled-components 标记模板文字转译为比 Babel 通常创建的表示形式更小的表示形式。

等等，转译标记模板文字？Babel 不是本地做这个吗？ 🤔 使用 Babel，你可能正在将 ES2015+ JavaScript 转译为 ES5 兼容的代码，以支持旧版浏览器。最受欢迎的推荐基础 Babel 预设 (es2015 / env / latest) 包括 babel-plugin-transform-es2015-template-literals 转译，以使标记模板文字在旧版浏览器中正常工作，但有一个注意事项：该转译的输出非常冗长。这样做是为了满足规范要求。

以下是用 babel-preset-latest 处理的转译代码示例

var _templateObject = _taggedTemplateLiteral(['width: 100%;'], ['width: 100%;'])
function _taggedTemplateLiteral(strings, raw) {
  return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } }))
}
var Simple = _styledComponents2.default.div(_templateObject)

styled-components 不需要完全的规范兼容性。我们的 Babel 插件将转译附加到 styled 组件的模板文字，使其采用稍微不同的、更小的形式，该形式仍然可以在旧版浏览器中工作，但占用的空间要小得多。

以下是使用 styled-components babel 插件和 { transpileTemplateLiterals: true } 选项的前面示例

var Simple = _styledComponents2.default.div(['width: 100%;'])

该插件足够智能，不会修改属于其他库和用例的带标签的模板字面量。

// Following will be converted:
styled.div``
keyframe``
css```some text` // But this will not be converted:


// Here the outer template literal will be converted
// because it's attached to the component factory,
// but the inner template literals will not be touched:
styled.div`
  color: ${light ? `white` : `black`};
`

您可以使用 transpileTemplateLiterals 选项禁用此功能。

{
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "transpileTemplateLiterals": false
      }
    ]
  ]
}

在专门解释它们的章节中，详细了解带标签的模板字面量。

命名空间

命名空间将确保您的类名是唯一的；当您使用微前端，并且可能发生类名冲突时，此设置非常方便。

如果需要，可以通过 babel 配置启用此行为。

{
  "plugins": [
    ["babel-plugin-styled-components", {
      "namespace": "my-app"
    }]
  ]
}

以下是在启用 namespace 后处理的转译代码示例。

_styledComponents2.default.div.withConfig({
  displayName: 'code__before',
  componentId: 'my-app__sc-3rfj0a-1',
})(['color:blue;'])

注意

⚠️ 此功能从版本 **1.11** 开始提供。

SWC 插件

此插件为使用 styled-components 和 SWC 编译器进行服务器端渲染、样式缩小和更好的调试体验提供支持。

用法

首先，安装 @swc/plugin-styled-components 和 @swc/core 包。

npm install --save-dev @swc/plugin-styled-components @swc/core

然后，将插件添加到您的 .swcrc 配置文件中。

{
  "jsc": {
    "experimental": {
      "plugins": [
        [
          "@swc/plugin-styled-components",
          {
            "displayName": true,
            "ssr": true
          }
        ]
      ]
    }
  }
}

选项

displayName:
- 描述：使用更丰富的输出增强每个组件上附加的 CSS 类名，以帮助在没有 React DevTools 的情况下识别 DOM 中的组件。它还允许您在 React DevTools 中查看组件的 displayName。
- 类型：布尔值
- 默认值：true
- 值：true 或 false
ssr:
- 描述：为每个 styled 组件添加一个唯一标识符，以避免由于客户端和服务器上不同的类生成而导致的校验和不匹配。有助于服务器端渲染 (SSR)。
- 类型：布尔值
- 默认值：true
- 值：true 或 false
fileName:
- 描述：控制组件的 displayName 是否以文件名作为前缀，还是仅使用组件名。
- 类型：布尔值
- 默认值：true
- 值：true 或 false
meaninglessFileNames:
- 描述：允许自定义与 styled 组件功能描述无关的文件名列表。使用目录名代替。
- 类型：字符串数组
- 默认值：["index", "styles"]
- 值：任何表示无意义文件名的字符串数组。
minify:
- 描述：通过删除所有空格和注释来缩小您的 CSS。还会将带标签的模板字面量转译为更小的表示形式。
- 类型：布尔值
- 默认值：true
- 值：true 或 false
transpileTemplateLiterals:
- 描述：将 styled-components 带标签的模板字面量转译为更小的表示形式。有助于减小包大小。
- 类型：布尔值
- 默认值：true
- 值：true 或 false
pure:
- 描述：启用称为“纯注释”的功能，以帮助 styled 组件的死代码消除过程。
- 类型：布尔值
- 默认值：false
- 值：true 或 false
namespace:
- 描述：确保您的类名是唯一的，在使用微前端（可能发生类名冲突）时很有用。
- 类型：字符串
- 默认值：undefined
- 值：任何表示所需命名空间的字符串。

服务器端渲染

通过为每个 styled 组件添加一个唯一标识符，此插件避免了由于客户端和服务器上不同的类生成而导致的校验和不匹配。如果您没有使用此插件，并尝试对 styled 组件进行服务器端渲染，React 会在重新水合过程中，针对 HTML 属性不匹配发出警告。

您可以通过将 ssr 选项设置为 false 来禁用此功能。

{
  "jsc": {
    "experimental": {
      "plugins": [
        [
          "@swc/plugin-styled-components",
          {
            "ssr": false
          }
        ]
      ]
    }
  }
}

更好的调试

此选项使用更丰富的输出增强每个组件上附加的 CSS 类名，以帮助在没有 React DevTools 的情况下识别 DOM 中的组件。它还允许您在 React DevTools 中查看组件的 displayName。

如果您不需要此功能，可以通过将 displayName 选项设置为 false 来禁用它。

{
  "jsc": {
    "experimental": {
      "plugins": [
        [
          "@swc/plugin-styled-components",
          {
            "displayName": false
          }
        ]
      ]
    }
  }
}

控制组件的 `displayName`

默认情况下，组件的 displayName 将以文件名作为前缀，以使组件名称尽可能唯一。

你可以通过禁用 fileName 选项，强制组件的 displayName 仅为组件名称

{
 "jsc": {
   "experimental": {
     "plugins": [
       [
         "@swc/plugin-styled-components",
         {
           "fileName": false
         }
       ]
     ]
   }
 }
}

控制哪些文件名没有意义

一种常见模式是将组件放在 Button/index.jsx 中，而不是 Button.jsx 中。默认情况下，如果 fileName 选项设置为 true，则插件将使用目录名（<button class="Button-asdf123 asdf123" />）生成 displayName，而不是文件名（<button class="index-asdf123 asdf123" />），因为前者提供了更多信息。

使用 meaninglessFileNames 选项，您可以自定义与 styled 组件功能描述无关的文件名列表，因此应改用目录名。

{
 "jsc": {
   "experimental": {
     "plugins": [
       [
         "@swc/plugin-styled-components",
         {
           "meaninglessFileNames": ["index", "styles"]
         }
       ]
     ]
   }
 }
}

压缩

此插件通过删除所有空格和注释来缩小您的 CSS。它还会将带标签的模板字面量转译为更小的表示形式，从而保留宝贵的字节，使您的包更小。

如果需要，可以通过将 minify 选项设置为 false 来禁用此行为。

{
 "jsc": {
   "experimental": {
     "plugins": [
       [
         "@swc/plugin-styled-components",
         {
           "minify": false,
           "transpileTemplateLiterals": false
         }
       ]
     ]
   }
 }
}

死代码消除

由于 styled 组件的转译和构建方式，默认情况下，缩小器无法对它们正确执行死代码消除，因为它们被认为具有副作用。但是，有一种功能可以启用以帮助此过程，称为“纯注释”。

{
 "jsc": {
   "experimental": {
     "plugins": [
       [
         "@swc/plugin-styled-components",
         {
           "pure": true
         }
       ]
     ]
   }
 }
}

模板字符串转译

与 Babel 插件类似，此插件将 styled-components 带标签的模板字面量转译为比 SWC 通常创建的表示形式更小的表示形式。这有助于减小包大小。

您可以通过将 transpileTemplateLiterals 选项设置为 false 来禁用此功能。

{
 "jsc": {
   "experimental": {
     "plugins": [
       [
         "@swc/plugin-styled-components",
         {
           "transpileTemplateLiterals": false
         }
       ]
     ]
   }
 }
}

命名空间

使用 namespace 选项，可以确保您的类名是唯一的，这在使用微前端（可能发生类名冲突）时很有用。

要启用此行为，请在配置中设置 namespace 选项。

{
 "jsc": {
   "experimental": {
     "plugins": [
       [
         "@swc/plugin-styled-components",
         {
           "namespace": "my-app"
         }
       ]
     ]
   }
 }
}

Babel 宏
v4v5

注意

由于缺乏使用，并且对其他使用者来说，这不是必需的膨胀，因此此功能在 v6.1 中被删除了。更多信息

Babel 宏作为一种全功能的选项，正在迅速流行起来，用于允许对像 create-react-app 这样的零配置项目进行高级代码转译。

如果您的脚手架使用 babel-plugin-macros 设置，则只需使用新的 styled-components/macro 导入，而不是 styled-components。

import styled, { createGlobalStyle } from 'styled-components/macro'


const Thing = styled.div`
  color: red;
`


const GlobalStyle = createGlobalStyle`
  body {
    color: 'white';
  }
`

宏包含了我们的 babel 插件的所有功能，同时允许未弹出工具处理构建过程中的 Babel 部分。特别感谢 Luc Leray (@lucleray) 帮助实现了这一点！

实验性配置

babel-plugin-macros 使用 cosmiconfig 读取 babel-plugin-macros 配置，该配置可以位于从导入文件向上查找的目录中的以下任何文件中。

.babel-plugin-macrosrc
.babel-plugin-macrosrc.json
.babel-plugin-macrosrc.yaml
.babel-plugin-macrosrc.yml
.babel-plugin-macrosrc.js
babel-plugin-macros.config.js
babelMacros in package.json

然后，您可以在 styledComponents 条目中指定与我们的 babel 插件相同的选项。

// babel-plugin-macros.config.js
module.exports = {
  // ...
  // Other macros config
  styledComponents: {
    pure: true,
  },
}

有关更多信息，请参阅 babel-plugin-macros 的实验性配置。

强制宏导入

您可能希望确保在整个项目中始终从宏导入对象。这可以通过使用来自 ESLint 的 no-restricted-imports 规则来实现。

"no-restricted-imports": [
  "error",
  {
    "paths": [{
      "name": "styled-components",
      "message": "Please import from styled-components/macro."
    }],
    "patterns": [
      "!styled-components/macro"
    ]
  }
]

TypeScript 插件

typescript-plugin-styled-components 是一个 TypeScript 插件，它可以为您提供更好的调试体验。

注意

⚠️ TypeScript 不允许直接从命令行编译器 tsc 中使用任何插件或转换器。因此，该插件仅与使用 TypeScript 加载程序的构建工具链（如 webpack）一起使用。如果您想投票支持它，有一个公开问题，可以将插件引入 tsc 中。

有关文档，请参阅该项目的 GitHub 存储库。

Jest 集成

Jest 样式组件是一套用于测试带有 Jest 的样式组件的工具。此软件包可改善快照测试体验，并提供一种全新的匹配器来对样式规则进行预期。

安装

npm install --save-dev jest-styled-components

快照测试

当我们使用样式组件构建 UI 时，我们希望确保输出不会意外更改。快照测试是测试 React 组件的绝佳方法，而此软件包通过将样式添加到快照中，使体验更加令人愉悦。

以下是一个测试示例

import React from 'react'
import styled from 'styled-components'
import renderer from 'react-test-renderer'
import 'jest-styled-components'


const Button = styled.button`
  color: red;
`


test('it works', () => {
  const tree = renderer.create(<Button />).toJSON()
  expect(tree).toMatchSnapshot()
})

以下是一个结果快照的示例

exports[`it works 1`] = `
.c0 {
  color: red;
}


<button
  className="c0"
/>
`

有关真实世界的演示，请查看该网站的存储库。

`toHaveStyleRule`

如果我们只想检查是否已将特定样式应用于元素，则可以使用 toHaveStyleRule 匹配器。此函数采用两个必需参数，属性（字符串）和值（字符串或正则表达式），以及一个可选对象以搜索嵌套在 at 规则中的规则或将修饰符添加到类选择器。

import React from 'react'
import styled from 'styled-components'
import renderer from 'react-test-renderer'
import 'jest-styled-components'


const Button = styled.button`
  color: red;
  @media (max-width: 640px) {
    &:hover {
      color: green;
    }
  }
`


test('it works', () => {
  const tree = renderer.create(<Button />).toJSON()
  expect(tree).toHaveStyleRule('color', 'red')
  expect(tree).toHaveStyleRule('color', 'green', {
    media: '(max-width: 640px)',
    modifier: ':hover',
  })
})

Stylelint

使用 stylelint 梳理您的样式组件！

安装

对于 stylelint v15+（推荐）

第一次配置 stylelint（v15+）？请按照以下步骤操作

您需要

stylelint
stylelint-config-standard，用于扩展标准 stylelint 配置
postcss-styled-syntax，用于解析您的样式组件并从中提取 CSS

npm install --save-dev \
  stylelint \
  stylelint-config-standard \
  postcss-styled-syntax

在项目的根目录中添加一个 .stylelintrc 文件

{
  "extends": [
    "stylelint-config-standard"
  ],
  "customSyntax": "postcss-styled-syntax"
}

对于 stylelint v14 及更低版本

您需要

stylelint
stylelint-processor-styled-components，用于从 styled-components 中提取样式
stylelint-config-styled-components 用于禁用与 styled-components 冲突的 stylelint 规则
您最喜欢的 stylelint 配置！（例如 stylelint-config-recommended）

注意

我们建议使用 Stylelint v9+，因为它添加了允许我们在 CSS 语法错误上报告正确行号的功能

npm install --save-dev \
  stylelint \
  stylelint-processor-styled-components \
  stylelint-config-styled-components \
  stylelint-config-recommended

在项目的根目录中添加一个 .stylelintrc 文件

{
  "processors": [
    "stylelint-processor-styled-components"
  ],
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-styled-components"
  ]
}

设置

您需要运行 stylelint。在您的 package.json 中添加一个 lint:css 脚本，该脚本使用通配符对所有样式组件运行 stylelint

{
  "scripts": {
    "lint:css":"stylelint './src/**/*.js'"
  }
}

注意

该处理器会忽略不包含任何 styled-components 的 JavaScript 文件，因此，只要您将其限制为 JavaScript（或 TypeScript），则不必担心过于宽泛。

现在，您可以通过运行脚本来梳理您的 CSS！🎉

npm run lint:css

注意

Stylelint --fix 选项在 v15+ 版本中使用相同的规则。

Webpack

如果希望在构建时进行梳理，而不是作为单独的命令，则可以使用 stylelint-custom-processor-loader 用于 webpack。

`stylelint-config-styled-components`

使用此处理器时，一些 stylelint 规则会抛出无法阻止的错误，例如 no-empty-source 或 no-missing-end-of-source-newline。我们还需要强制执行一些规则，例如 no-vendor-prefix 规则。（styled-components 会自动为您的代码添加供应商前缀，因此您无需手动操作）

stylelint-config-styled-components 会自动禁用会导致冲突的规则。

注意

您可以在自定义的 .stylelintrc 中覆盖在共享配置中定义的规则。

与其他库一起使用

其他一些库也使用带有标记模板文字的 styled.x 模式。此处理器也会梳理这些标记模板文字中的 CSS，只要它们使用 styled 关键字。

如果希望将处理器与另一个库一起使用，但还想更改关键字（例如，编写 cool.div 而不是 styled.div），请使用 moduleName 选项

import cool from 'other-library';


const Button = cool.button`
  color: blue;
`;

{
  "processors": [
    [
      "stylelint-processor-styled-components",
      {
        "moduleName": "other-library"
      }
    ]
  ]
}

注意

该双数组是有意设计的，但只有在设置选项时才需要，请参阅处理器配置文档。

注意

我们只正式支持 styled-components，但希望其他库也能从该处理器中获益。

插值标记（使用 `stylelint-processor-styled-components`）

有时，即使您的 CSS 没有任何问题，stylelint 也会抛出错误（例如 CssSyntaxError）。这种情况通常是由于插值造成的，更具体地说，是由于处理器不知道您要插值的内容。

一个简化的示例

const something = 'background';


const Button = styled.div`
  ${something}: papayawhip;
`;

当您的样式中包含插值时，处理器无法知道它们是什么，因此它会进行合理的猜测，并用语法上等效的占位符值替换它们。由于 stylelint 不是代码流分析工具，因此无法涵盖所有边缘情况，处理器有时会出错。

插值标记允许您在处理器猜测错误的情况下告诉处理器插值是什么；然后，它可以使用您的标记基于语法上正确的替换值替换插值。

例如

const something = 'background';


const Button = styled.div`
  // Tell the processor that "something" is a property
  ${/* sc-prop */ something}: papayawhip;
`;

现在，处理器知道 something 插值是一个属性，它可以使用属性替换插值以进行梳理。

要标记插值，请在插值的开头或结尾添加注释。（${/* sc-tag */ foo} 或 ${bar /* sc-tag */}）标记以 sc- 开头，如果已指定，则标记会覆盖处理器对插值是什么的猜测。

标记

支持的标签完整列表

sc-block
sc-selector
sc-declaration
sc-property
sc-value

注意

如果您对词汇有疑问，可以参考此 CSS 词汇表，其中包含示例。

例如，当您插值另一个样式化组件时，您实际上插值的是其唯一的选择器。由于处理器不知道这一点，您可以在 linting 时告诉它用选择器替换它。

const Wrapper = styled.div`
  ${/* sc-selector */ Button} {
    color: red;
  }
`;

您也可以使用简写标签来避免代码过于冗长。例如

const Wrapper = styled.div`
  ${/* sc-sel */ Button} {
    color: red;
  }
`;

`sc-custom`

sc-custom 应该作为最后的手段逃生门使用。如果可能，请优先使用标准标签！

除了上述标准标签外，处理器还具有 sc-custom 标签，允许您涵盖更多独特且不常见的边缘情况。使用 sc-custom 标签，您可以自己决定占位符的值。

例如

// Switch between left and right based on language settings passed through via the theme
const rtlSwitch = (props) => (props.theme.dir === 'rtl' ? 'left' : 'right');


const Button = styled.button`
  background: green;
  // Tell the processor to replace the interpolation with "left"
  // when linting
  margin-${/* sc-custom "left" */ rtlSwitch}: 12.5px;
`;

语法说明

在您的 JS/CSS 中关闭规则

使用 stylelint-disable 注释关闭规则（请参阅 stylelint 文档，了解所有允许的语法），无论是在标记模板文字内还是外。

import React from 'react';
import styled from 'styled-components';


// Disable stylelint from within the tagged template literal
const Wrapper = styled.div`
  /* stylelint-disable */
  background-color: 123;
`;


// Or from the JavaScript around the tagged template literal
/* stylelint-disable */
const Wrapper = styled.div`
  background-color: 123;
`;

模板文字样式和缩进

为了让 stylelint 正确应用缩进规则，处理器需要对样式进行一些有主见的预处理，这导致我们只正式支持一种缩进样式。（支持的样式是“默认”样式，如所有文档中所示）

重要的是，您将关闭反引号放在缩进的基本级别上，如下所示

正确

if (condition) {
  const Button = styled.button`
    color: red;
  `;
}

错误

if (condition) {
  const Button = styled.button`
    color: red;
`
}

if (condition) {
  const Button = styled.button`
    color: red;`
}

其他标记模板文字样式可能也巧合地得到支持，但除非使用上述样式，否则不会处理任何与缩进相关的错误。

样式化主题

使用 styled-theming 为您的样式化组件创建主题

阅读介绍性博文

安装

首先安装 babel-plugin

npm install --save styled-theming

示例

import React from 'react'
import styled, { ThemeProvider } from 'styled-components'
import theme from 'styled-theming'


const boxBackgroundColor = theme('mode', {
  light: '#fff',
  dark: '#000',
})


const Box = styled.div`
  background-color: ${boxBackgroundColor};
`


export default function App() {
  return (
    <ThemeProvider theme={{ mode: 'light' }}>
      <Box>Hello World</Box>
    </ThemeProvider>
  )
}

API

`<ThemeProvider>`

参见 styled-components 文档

<ThemeProvider> 是 styled-components 的一部分，但它是 styled-theming 所必需的。

import { ThemeProvider } from 'styled-components'

<ThemeProvider> 接受一个单独的 prop theme，您应该传递一个包含字符串或获取函数的对象。例如

<ThemeProvider theme={{ mode: "dark", size: "large" }}>
<ThemeProvider theme={{ mode: modes => modes.dark, size: sizes => sizes.large }}>

您通常应该在应用程序的根目录中设置 <ThemeProvider>

function App() {
  return (
    <ThemeProvider theme={...}>
      {/* rest of your app */}
    </ThemeProvider>
  );
}

`theme(name, values)`

您的大部分主题都将使用此函数完成。

name 应该与您的 <ThemeProvider> 主题中的键之一匹配。

;<ThemeProvider theme={{ whatever: '...' }} />

theme("whatever", {...});

values 应该是一个对象，其中一个键将通过提供给 <ThemeProvider> 主题的值进行选择。

<ThemeProvider theme={{ mode: "light" }} />
<ThemeProvider theme={{ mode: "dark" }} />


theme("mode", {
  light: "...",
  dark: "...",
});

此对象的 value 可以是任何 CSS value。

theme("mode", {
  light: "#fff",
  dark: "#000",
});


theme("font", {
  sansSerif: '"Helvetica Neue", Helvetica, Arial, sans-serif',
  serif: 'Georgia, Times, "Times New Roman", serif',
  monoSpaced: "Consolas, monaco, monospace",
});

这些值也可以是返回 CSS value 的函数。

theme('mode', {
  light: props => props.theme.userProfileAccentColor.light,
  dark: props => props.theme.userProfileAccentColor.dark,
})

theme 将创建一个函数，您可以将其用作样式化组件的 styled 函数中的 value。

import styled from 'styled-components'
import theme from 'styled-theming'


const backgroundColor = theme('mode', {
  light: '#fff',
  dark: '#000',
})


const Box = styled.div`
  background-color: ${backgroundColor};
`

`theme.variants(name, prop, themes)`

通过额外的 prop 选择相同组件的变体通常很有用。

为了在主题化中简化这一过程，styled-theming 提供了一个 theme.variants 函数。

import styled from "styled-components";
import theme from "styled-theming";


const backgroundColor = theme.variants("mode", "variant", {
  default: { light: "gray", dark: "darkgray" },
  primary: { light: "blue", dark: "darkblue" },
  success: { light: "green", dark: "darkgreen" },
  warning: { light: "orange", dark: "darkorange" },
});


const Button = styled.button`
  background-color: ${backgroundColor};
`;


Button.propTypes = {
  variant: PropTypes.oneOf(["default", "primary", "success", "warning"])
};


Button.defaultProps = {
  variant: "default",
};


<Button />
<Button variant="primary" />
<Button variant="success" />
<Button variant="warning" />

语法高亮

在模板文字中编写 CSS 时，您过去会丢失的一件事是语法高亮。我们正在努力在所有编辑器中实现正确的语法高亮。我们目前支持 Atom、Visual Studio Code、WebStorm，并且很快将支持 Sublime Text。

这是正确高亮显示的样子

Atom

@gandm，language-babel 的创建者，已经在 Atom 中添加了对 styled-components 的支持！

要获得正确的语法高亮显示，您所要做的就是为您的 JavaScript 文件安装并使用 language-babel 包！

Sublime Text

由 @garetmckinley 提交的 PR 已经合并到 babel-sublime 中，但尚未发布到 Package Control。但是，它可以像此问题中所述的那样直接从 GitHub 安装。

另一个选择是 Naomi，由 Alexandre Borela 创建，这是一个针对 Sublime Text 3 的语法高亮定义集合，开箱即用地支持 styled-components。

Visual Studio Code

@gandm 的 language-babel 已移植到 VSCode，并由 Michael McDermott 以 Babel JavaScript 的名称命名。它为 Babel 语法高亮显示提供相同的全功能解决方案，其中包含 styled-components。

如果您希望保留当前的 JavaScript 语法高亮，可以使用 vscode-styled-components 扩展在您的 Javascript 文件中提供 styled-components 语法高亮。您可以在 Marketplace 中像往常一样安装它。

VIM / NeoVim

The vim-styled-components 插件在您的 Javascript 文件中提供语法高亮。使用您通常的插件管理器安装它，例如 Plug、Vundle、Pathogen 等。

另外，如果您正在寻找一个很棒的 javascript 语法包，您永远不会出错 YAJS.vim.

WebStorm、IntelliJ IDEA、PhpStorm、PyCharm 和 RubyMine

The webstorm-styled-components 插件在模板字符串中添加了 CSS 属性和值的代码补全和高亮。它还为插值中的 JavaScript 符号提供了代码补全和导航。您可以从 IDE 安装它：转到 Preferences | Plugins 并搜索 Styled Components。

其他编辑器

我们可以用您的帮助将语法高亮支持扩展到其他编辑器！所有这些语法高亮都是由 Styled Components 社区构建的，因此如果您想开始为您的编辑器开发语法高亮，我们非常乐意看到它。

工具

Babel 插件

用法

服务器端渲染

更好的调试

控制组件的 displayName

控制哪些文件名没有意义

压缩

死代码消除

模板字符串转译

命名空间

SWC 插件

用法

选项

服务器端渲染

更好的调试

控制组件的 displayName

控制哪些文件名没有意义

压缩

死代码消除

模板字符串转译

命名空间

Babel 宏v4v5

实验性配置

强制宏导入

TypeScript 插件

Jest 集成

安装

快照测试

toHaveStyleRule

Stylelint

安装

对于 stylelint v15+（推荐）

对于 stylelint v14 及更低版本

设置

Webpack

stylelint-config-styled-components

与其他库一起使用

插值标记（使用 stylelint-processor-styled-components）

标记

sc-custom

语法说明

在您的 JS/CSS 中关闭规则

模板文字样式和缩进

样式化主题

安装

示例

API

<ThemeProvider>

theme(name, values)

theme.variants(name, prop, themes)

语法高亮

Atom

Sublime Text

Visual Studio Code

VIM / NeoVim

WebStorm、IntelliJ IDEA、PhpStorm、PyCharm 和 RubyMine

其他编辑器

请继续下一頁

常见问题解答

控制组件的 `displayName`

控制组件的 `displayName`

Babel 宏
v4v5

`toHaveStyleRule`

`stylelint-config-styled-components`

插值标记（使用 `stylelint-processor-styled-components`）

`sc-custom`

`<ThemeProvider>`

`theme(name, values)`

`theme.variants(name, prop, themes)`