styled-theming使用css-in-js为您的应用程序创建主题

styled-theming使用css-in-js为您的应用程序创建主题

styled-theming

Create themes for your app using css-in-js

Installation

yarn add styled-theming

API

createTheme(theme)

Create a theme for a .

theme can either be a string or a function that selects a theme from a set:

import {createTheme} from 'styled-theming';import {ThemeProvider} from 'styled-components'; themes.dark}>

toThemeSet(themes)

Create a named set of CSS values where the keys are the names of your themes.

import {toThemeSet} from 'styled-theming';import styled from 'styled-components';const backgroundColor = toThemeSet({ light: '#fff', dark: '#000'});const Page = styled.div` background-color: ${backgroundColor};`;

This will return a function that accepts props with a theme key that should be the theme from createTheme. As long as you set up a tool like styled-components properly it should just work.

backgroundColor({ theme: createTheme('dark') });

Additionally, the returned value will have all the key-value pairs from your theme set as properties.

backgroundColor.light === '#fff';backgroundColor.dark === '#000';

toVariantThemeSet(key, variants)

It is often useful to have different variants of your components. You could implement this yourself on top of toThemeSet, but since it is so common there's also a provided toVariantThemeSet.

Provide a key to use for switching the variant and a named set of themes.

import styled from 'styled-components';import {toVariantThemeSet} from 'styled-theming';const headingColor = toVariantThemeSet('variant', { default: { light: '#000', dark: '#fff' }, fancy: { light: '#f0f', dark: '#f0f' },});const Heading = styled.h1` color: ${headingColor};`;Heading.propTypes = { variant: PropTypes.oneOf(['default', 'fancy'])};Heading.defaultProps = { variant: 'default',};

The returned value will have all the key-value pairs from your variant theme set as properties.

headingColor.default === { light: '#fff', dark: '#000' };headingColor.fancy === { light: '#f0f', dark: '#f0f' };

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。