styled-components 風格主題

使用樣式主題為樣式組件創(chuàng)建主題

閱讀介紹性博客文章

安裝

首先安裝 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 函數(shù)的對象。例如：

<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 值的函數(shù)。

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

主題將創(chuàng)建一個函數(shù)，您可以將該函數(shù)用作樣式組件中的值。風格功能。

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

主題.變量（名稱、道具、主題）

創(chuàng)建通過附加道具選擇的相同組件的變體通常很有用。

為了通過制作方式使這一點更加容易，樣式性為項提供了一個主題. 變體功能。

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