[英]React-rainbow components color theme
I have an app that I started developing recently and I'm considering moving over to react-rainbow.我有一个最近开始开发的应用程序,我正在考虑转移到 react-rainbow。 Is there a way to set a color theme for all react-rainbow components?
有没有办法为所有 react-rainbow 组件设置颜色主题?
Customization is allowed by using the <Application />
component as a wrapper of your entire application, the component property theme will accept an object where you can specify your palette of colors.通过使用
<Application />
组件作为整个应用程序的包装器允许自定义,组件属性主题将接受一个对象,您可以在其中指定您的调色板。
const theme = {
rainbow: {
palette: {
brand: '#5c56b6',
},
},
};
<Application theme={theme}>
<Button
label="Button Brand"
onClick={() => alert('clicked!')}
variant="brand"
/>
...
</Application>
You can find more documentation here https://react-rainbow.io/#/Customization您可以在此处找到更多文档https://react-rainbow.io/#/Customization
First, you have to create an object with the customizations you want to add, then you import Application from react-rainbow-components and wrap your components with Application.首先,您必须使用要添加的自定义创建一个对象,然后从 react-rainbow-components 导入 Application 并使用 Application 包装您的组件。 Finally, you pass your customizations object as the prop theme to Application.
最后,您将自定义对象作为道具主题传递给应用程序。 This is an example.
这是一个例子。
import React from 'react';
import { Application, Button } from 'react-rainbow-components';
const theme = {
rainbow: {
palette: {
brand: '#5c56b6',
},
},
};
<Application theme={theme} className="rainbow-p-vertical_xx-large rainbow-align-content_center">
<Button
label="Button Brand"
onClick={() => alert('clicked!')}
variant="brand"
/>
</Application>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.