styled-components 风格主题

使用样式主题为样式组件创建主题

阅读介绍性博客文章

安装

首先安装 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

<主题提供>

查看样式组件文档

<主题提供>是样式组件的一部分，但样式项是需要的。

import { ThemeProvider } from 'styled-components'

<主题提供>接受单个道具主题应传递具有字符串或 getter 函数的对象。例如：

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

您通常应设置一个<主题提供>在应用的根目录：

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

主题（名称、值）

您的大部分活动都将使用此功能完成。

名字应匹配您的键之一<主题提供>主题。

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

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

值应是一个对象，其中一个键将由提供给<主题提供>主题。

<ThemeProvider theme={{ mode: "light" }}/>
<ThemeProvider theme={{ mode: "dark" }}/>
theme("mode", {
  light: "...",
  dark: "...",
});

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

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 值的函数。

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

主题将创建一个函数，您可以将该函数用作样式组件中的值。风格功能。

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};
`

主题.变量（名称、道具、主题）

创建通过附加道具选择的相同组件的变体通常很有用。

为了通过制作方式使这一点更加容易，样式性为项提供了一个主题. 变体功能。

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"/>