3oilerplate 中文文档教程

Question

3oilerplate

个人 React 组件库和工具包。 通过围绕Styled Components 的wrapper，将Styled System 的主题魔法 带入组件。

• Declare component styles and variants with theme values
• Override component styles with the style prop
• Override component styles or add variants in the theme object
• Override styles of child elements of components by using the sRef prop

Installation

npm install 3oilerplate

How to use

在 ThemeProvider 中包装您的应用程序：

import { ThemeProvider, Text } from '3oilerplate'
import theme from './style/theme'

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Text>Hello world</Text>
    </ThemeProvider>
  )
}

Define a theme

import { darken } from '3oilerplate'

const theme = {
  breakpoints: ['320px', '640px', '768px', '1024px', '1440px'],
  space: {
    xs: '0.5rem',
    s: '0.75rem',
    m: '1.25rem',
    l: '2.5rem',
    xl: '3.75rem',
  },
  colors: {
    primary: '#3e64ff',
    primaryDark: darken('#3e64ff', 0.25),
    secondary: '#7c73e6',
    secondaryDark: darken('#7c73e6', 0.25),
  },
  fonts: {
    base: "'Source Sans Pro', Helvetica, Arial, sans-serif",
    code: 'Consolas, Monaco, monospace, Arial, sans-serif',
  },
  radii: {
    s: '0.125rem',
    m: '0.25rem',
    l: '0.5rem',
  },
}

Define components

使用 styled 包装器定义组件。

Param	Type	Description
defaults	object	default styling
variants	object	variant styling
ref	string	referende to be able to override components and subscomponents

import { styled } from '3oilerplate'

const Button = styled.button({
    backgroundColor: 'primary',
    color: 'white',

    ':hover': {
      backgroundColor: 'primaryDark',
    },
  },
  {
    isSecondary: {
      backgroundColor: 'secondary',

      ':hover': {
        backgroundColor: 'secondaryDark',
      },
    },
  },
  'Button',
})

Use your custom components or components from this library

import { Container } from '3oilerplate'
import { Text } from '@components'

const HelloWorldComponent = () => {
  return (
    <Container>
      <Text>Hello World</Text>
    </Container>
  )
}

Variant Styles

当您传递具有与变体名称匹配的真值的道具时，会应用变体。

<Button isSecondary />

变体可以如前所示在组件声明中定义，也可以在主题配置中定义。

const theme = {
  ...,
  components: {
    Button: {
      default: {
        backgroundColor: 'secondary',
      },
      variants: {
        isOutline: {
          background: 'transparent',
          borderColor: 'secondary',
        },
      },
    },
  },
}

Inline Styles

每个组件都有一个 style 道具，您可以将内联样式传递给它。

<Button s={{ backgroundColor: 'secondary' }} />

Components with children

当您在定义组件时使用 ref 字段。

您可以将内联样式应用于包含组件的子组件：

<Checkbox
  s={{
    borderColor: 'secondary',
    Checkbox_Indicator: { backgroundColor: 'secondary' },
  }}
/>

您还可以在主题配置中将样式应用于组件的子组件：

const theme = {
  ...,
  components: {
    Checkbox: {
      default: {
        borderColor: 'secondary',
        Checkbox_Indicator: { backgroundColor: 'secondary' },
      },
    },
  },
}