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:

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 to Object.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'
Edit this page