React-rainbow 组件颜色主题

Question

我有一个最近开始开发的应用程序，我正在考虑转移到 react-rainbow。 有没有办法为所有 react-rainbow 组件设置颜色主题？

Answer 1

通过使用<Application />组件作为整个应用程序的包装器允许自定义，组件属性主题将接受一个对象，您可以在其中指定您的调色板。

const theme = {
    rainbow: {
        palette: {
            brand: '#5c56b6',
        },
    },
};

<Application theme={theme}>
    <Button
        label="Button Brand"
        onClick={() => alert('clicked!')}
        variant="brand"
    />
    ...
</Application>

您可以在此处找到更多文档https://react-rainbow.io/#/Customization

Answer 2

首先，您必须使用要添加的自定义创建一个对象，然后从 react-rainbow-components 导入 Application 并使用 Application 包装您的组件。 最后，您将自定义对象作为道具主题传递给应用程序。 这是一个例子。

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>