Configuration
Structure
Fower provides default config for different platform, the config is a plain JavaScript object, the structure of config is like this:
const config = {
unit: 'px',
prefix: '',
important: false,
theme: {
// theme config
},
plugins: [
// plugin config
],
}
Built-in default config:
- For Web: @fower/preset-web
- For React Native: @fower/preset-react-native
- For Taro: @fower/preset-taro
unit
The unit
for the style like width, height, padding, margin... The default value of unit
option is px
, you can use rem
, em
, vh
, etc.
prefix
The prefix for the generated css classname, default is empty string.
important
if important
option is true, every css rule will attach !important postfix. Default value is false.
theme
The theme option is where you define your design system like color palette, spacing, fonts, border radius, breakpoints.
const config = {
theme: {
breakpoints: {
//
},
colors: {
//
},
spacings: {
//
},
fontSizes: {
//
},
// other theme config...
},
}
Learn more about the theme in the theme section.
Read Config
Fower config is a plain JavaScript object, you can read it from @fower/core
.
import { getConfig } from '@fower/core'
const config = getConfig()
console.log('config:', config)
console.log('config.inline:', config.inline)
console.log('config.theme:', config.theme)
Custom Config
You can update Fower config use setConfig()
Api from @fower/core
.
import { setConfig } from '@fower/core'
setConfig({
unit: 'rem',
})
By default, user config will deepmerge to default config. you can change configure strategy
by second param, form example, use replace strategy to replace the whole default config:
import { setConfig } from '@fower/core'
setConfig(
{
unit: 'rem',
},
'replace',
)
Supported strategy:
deepmerge
, default strategy, it will deepmerge to default config.merge
, it will merge to default config, equal toObject.assign
.replace
, it will replace current config.
Notice
Before you get or set config, you should import platform package at first.
import '@fower/react'
import { getConfig, setConfig } from '@fower/core'