styled-config
The configuration for styled-bootstrap-components
Installation
npm install --save styled-config
Usage
This package holds the theme for the styled-bootstrap-components and related functions. You can use is to customize your components.
Using styled-components
You can change appearance of styled-components as normal.
import styled from 'styled-components';import Button from 'styled-bootstrap-components'; const CustomizedButton = ` border-radius: 0; width: 128px;`;
Using a theme
You can use 'ThemeProvider' from 'styled-components' to modify the components' look. Theme provided to components directly or through provider can contain values that should override default ones.
import React from 'react';import ThemeProvider from 'styled-components';import Button from '../../../../packages/styled-button-component'; const App = <ThemeProvider => <Button >Themed primary button</Button> </ThemeProvider>
You can change colorScheme
object in theme to influence the whole
library's look.
const App = <ThemeProvider => <div> <Button >Themed primary button</Button> <Alert >Themed primary alert</Alert> <Container >Themed primary container</Container> </div> </ThemeProvider>
Values in config can be plain strings to use in styles or function that accepts the single argument - function for getting value from the current theme. If the value is function, it's return value will be used in styles.
// Part of default theme demonstrating usage of 'functional' values in the// configuration. This can be used to reference other values. const defaultTheme = // ... button: colors: primary: // ...
To see how to modify all the styled-bootstrap-components to create your own UI component library take a look at the theme.
License
MIT © Lukas Aichbauer