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>