1.0.0-beta.62 • Published 3 years ago
@rax-ui/styles v1.0.0-beta.62
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
配置的主题对象
1.0.0-beta.62
3 years ago
1.0.0-beta.60
4 years ago
1.0.0-beta.59
4 years ago
1.0.0-beta.57
4 years ago
1.0.0-beta.56
4 years ago
1.0.0-beta.55
4 years ago
1.0.0-beta.54
4 years ago
1.0.0-beta.53
4 years ago
1.0.0-beta.52
4 years ago
1.0.0-beta.51
4 years ago
1.0.0-beta.50
4 years ago
1.0.0-beta.48
4 years ago
1.0.0-beta.49
4 years ago
1.0.0-beta.47
4 years ago
1.0.0-beta.46
4 years ago
1.0.0-beta.45
4 years ago
1.0.0-beta.43
4 years ago
1.0.0-beta.42
4 years ago
1.0.0-beta.41
4 years ago
1.0.0-beta.40
4 years ago
1.0.0-beta.39
4 years ago
1.0.0-beta.38
4 years ago
1.0.0-beta.37
4 years ago
1.0.0-beta.36
4 years ago
1.0.0-beta.35
4 years ago
1.0.0-beta.32
4 years ago
1.0.0-beta.30
4 years ago
1.0.0-beta.29
4 years ago
1.0.0-beta.28
4 years ago
1.0.0-beta.27
4 years ago
1.0.0-beta.26
4 years ago
1.0.0-beta.23
4 years ago
1.0.0-beta.22
4 years ago
1.0.0-beta.20
4 years ago
1.0.0-beta.21
4 years ago
1.0.0-beta.18
4 years ago
1.0.0-beta.17
4 years ago
1.0.0-beta.16
4 years ago
1.0.0-beta.15
4 years ago
1.0.0-beta.14
4 years ago
1.0.0-beta.13
5 years ago
1.0.0-beta.11
5 years ago
1.0.0-beta.10
5 years ago
1.0.0-beta.9
5 years ago
1.0.0-beta.6
5 years ago
1.0.0-beta.5
5 years ago
1.0.0-beta.4
5 years ago
1.0.0-beta.3
5 years ago
1.0.0-beta.2
5 years ago
1.0.0-beta.1
5 years ago
1.0.0-beta.0
5 years ago