---
display: Styles
family: util
---

# Styles

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

## 安装

```shell

npm install @rax-ui/styles --save

```

## 快速上手

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

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

组件中使用

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

```

覆盖组件样式

```js
import Hello from './hello';

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

<Hello styles={customStyles} />
```

使用主题

```js
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` 配置的主题对象