# @rax-ui/styles

> Rax UI Styles

Latest version **1.0.0-beta.62** (published 2020-11-24) · 0 weekly downloads

## Install

```sh
npm install @rax-ui/styles
pnpm add @rax-ui/styles
yarn add @rax-ui/styles
bun add @rax-ui/styles
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-beta.62 |
| Published | 2020-11-24 |
| First published | 2019-08-08 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 14.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | jinli.lyy |
| Maintainers | lianmin, amdgigabyte, myronliu347 |
| Keywords | Rax, rax-component |

## Links

- npm: https://www.npmjs.com/package/@rax-ui/styles
- npm.io page: https://npm.io/package/@rax-ui/styles

## Dependencies (2)

- [@rax-ui/core](https://npm.io/package/@rax-ui/core.md) ^1.0.0-beta.62
- [rax-children](https://npm.io/package/rax-children.md) ^1.0.0

## Recent versions

- 1.0.0-beta.62 (latest) — 2020-11-24
- 1.0.0-beta.47 (next) — 2020-04-17
- 1.0.0-beta.60 — 2020-08-28
- 1.0.0-beta.59 — 2020-08-18
- 1.0.0-beta.57 — 2020-06-22
- 1.0.0-beta.56 — 2020-06-03
- 1.0.0-beta.55 — 2020-05-26
- 1.0.0-beta.54 — 2020-05-13
- 1.0.0-beta.53 — 2020-05-12
- 1.0.0-beta.52 — 2020-05-11
- 1.0.0-beta.51 — 2020-04-29
- 1.0.0-beta.50 — 2020-04-27
- 1.0.0-beta.49 — 2020-04-23
- 1.0.0-beta.48 — 2020-04-23
- 1.0.0-beta.46 — 2020-04-15
- … 36 more at https://npm.io/package/@rax-ui/styles/versions

## README

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

---
_Source: https://npm.io/package/@rax-ui/styles · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._