display: Styles family: util

Styles

UI 样式规范, 用于定义样式，提供样式覆盖和主题功能；

安装

npm install @rax-ui/styles --save

快速上手

定义组件样式, 采用 CSS BEM 规范.

// style.js
export default (theme) => {
  return {
    'hello': {
      fontSize: 50,
      color: theme.Hello.color,
    },
    'hello--primary': {
      color:  theme.Hello.primaryColor,
    }
  }
}

组件中使用

// hello.js
import { createElement } from 'rax';
import Text from 'rax-text';
import { useStyles } from '@rax-ui/styles';
import StyleProvider from './style';

const Hello = ({ primary = false, style, ...others }) => {

  const styles = useStyles(StyleProvider, others, (classNames) => {
    return {
      hello: classNames({
        'hello': true,
        'hello--primary': primary,
      })
    }
  });
  return <Text style={{
    ...styles.hello,
    style
  }}>Hello world</Text>;
}

覆盖组件样式

import Hello from './hello';

const customStyles = {
  'hello': {
    fontSize: 18,
    color: 'yellow'
  },
  'hello--primary': {
    color: 'blue'
  }
};

<Hello styles={customStyles} />

使用主题

import Hello from 'hello';
import ThemeProvider from '@rax-ui/styles';

const theme = {
  Hello: {
    color: '#333',
    primaryColor: 'red'
  }
};

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

API

ThemeProvider

全局注入主题，<ThemeProvider theme={} />

useStyles(styleProvider, props, flatStyle)

• styleProvider 为之前提供的样式函数。
• props 组件接收的属性, { styles }, styles 为组件上接收的样式
• flatStyle 拼接组件样式函数，会传入一个 classNames

useTheme()

返回 ThemeProvider 配置的主题对象