Configuration
#
StructureFower 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 Web rem: @fower/preset-web-rem
- 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 ConfigFower 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 ConfigYou 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.
#
NoticeBefore you get or set config, you should import platform package at first.
import '@fower/react'import { getConfig, setConfig } from '@fower/core'