介绍
React-themed 是一款基于 React 的 CSS-in-JS 库，它可以让你在你的 React 应用中通过定义主题和样式来管理样式的创建和使用。这个库使用简单方便，在项目中可以用于快速的构建样式。
安装
你可以使用 npm 来安装 react-themed:
npm install react-themed
使用
样式定义
在使用 React-themed 之前，我们需要先定义一个主题，以后我们可以使用这个主题来定义样式。可以通过任何方式来定义主题，但是最常见的方式是创建一个主题对象。
-- -------------------- ---- -------
----- ----- - -
------- -
-------- ----------
---------- ----------
--
------ -
----- -------- ------------
-------- ------------ ------------
--
--由于很多主题属性都可能在我们的应用中使用，所以我们需要对它们进行命名。一般而言，你可以对你的主题使用如下的结构，来轻松的定义更多的属性。
-- -------------------- ---- -------
----- ----- - -
------- -
-------- ----------
---------- ----------
--
------ -
----- -------- ------------
-------- ------------ ------------
--
--------- -
------ ------
------- -------
------ -------
--
--同时，你可以添加你自己的属性。
组件样式
我们可以使用主题中的属性来定义 React 组件的 CSS 样式。
const MyButton = styled.button`
font-family: ${props => props.theme.fonts.heading};
font-weight: bold;
color: ${props => props.theme.colors.primary};
background-color: ${props => props.theme.colors.secondary};
border: none;
padding: ${props => props.theme.spacings.medium};
`;应用主题
你可以使用 ThemeProvider 来将主题提供给你的组件。
import { ThemeProvider } from 'react-themed';
const App = () => (
<ThemeProvider theme={theme}>
<MyButton>Click me!</MyButton>
</ThemeProvider>
);示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ---------------
----- ----- - -
------- -
-------- ----------
---------- ----------
--
------ -
----- -------- ------------
-------- ------------ ------------
--
--------- -
------ ------
------- -------
------ -------
--
--
----- -------- - --------------
------------ ------- -- ---------------------------
------------ -----
------ ------- -- ----------------------------
----------------- ------- -- ------------------------------
------- -----
-------- ------- -- -----------------------------
--
----- --- - -- -- -
-------------- --------------
--------------- --------------
----------------
--
------ ------- ----总结
React-themed 提供了一种便利的方式来定义和应用主题样式，在 React 项目中使用这个库很容易，而且这个库提供了许多不同的主题配置选项。通过这篇文章的讲解，你现在已经学会如何使用 React-themed 来创建样式！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eae81e8991b448dc335