React 应用程序的亮层UI主题

这个软件包为使用Brightlayer UI设计系统的Eaton应用程序提供主题支持. 它包括使用 React w/ 开发者的资源 材料界面 版本 6+(本套件的先发版本将与 Material UI 版本 5 工作 - 请检查 更改日志 详细情况请查阅。 这个软件包现在有一个支持光模式和暗模式的单一主题选项.

关于其他框架,请检查我们的有关包:

• @ brightlayer-ui/angular-主题
• @brightlayer-ui/反应-本土主题

安装

用 npm 安装

npm install --save @brightlayer-ui/react-themes

线条

yarn add @brightlayer-ui/react-themes

使用量

要在应用程序中使用这些主题,只需将应用程序包入 ThemeProvider 并通过主题:

import { ThemeProvider } from '@mui/material/styles';
import { theme } from '@brightlayer-ui/react-themes';

<ThemeProvider theme={theme}>
    <App />
</ThemeProvider>;

主题将根据用户的系统偏好默认为光/暗模式. 要手动切换主题模式( 如从设置), 您需要使用 useColorScheme 钩子 (见下文).

更改默认模式

如果您不想将系统设置作为默认设置, 您可以设置 defaultMode 编辑 ThemeProvider数字 :

<ThemeProvider theme={theme} defaultMode={'dark' /* or 'light' */}></ThemeProvider>

手动旋转模式

您可以手动切换主题模式 useColorScheme 钩:

import { useColorScheme } from '@mui/material/styles';
import InvertColors from '@mui/icons-material/InvertColors';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';

const ToggleComponent = () => {
    const { mode, setMode } = useColorScheme();

    return (
        <Tooltip title={'Toggle Theme'}>
            <IconButton
                onClick={() => {
                    setMode(mode === 'light' ? 'dark' : 'light');
                }}
            >
                <InvertColors />
            </IconButton>
        </Tooltip>
    );
};

欲了解更多关于拼接模式的信息,请参见: MUI 文档。 。 。 .

关于BLUI主题的更详细资料,请参见我们 开发者文档 网站.

从v8到v9的迁移

在第九版中,主题现在遵循了来自MUI v7的标准. 为了使用新版本,您需要:

更新材料UI

请确保您将您的材料用户界面依赖性更新到第7版(包括@mui/材料、@mui/icons-材料等)。 参见官方MUI 迁移文件 更多细节.

从v7到v8的迁移

在8版中,主题现在遵循了从MUI v6中将光和暗的主题合并为一个主题对象的标准. 为了使用新版本,您需要:

更新材料UI

请确保您将您的材料用户界面依赖性更新到版本 6 (包括 @ mui/ material, @ mui/icons- material等) 。 参见官方MUI 迁移文件 更多细节.

合并主题

如果您之前在切换 blue 财务报告和审定财务报表 blueDark 主题 ThemeProvider,这应当替换为单个 theme 对象.

- import { blue, blueDark } from '@brightlayer-ui/react-themes';
+ import { theme } from '@brightlayer-ui/react-themes';

- <ThemeProvider theme={isDark ? blueDark : blue}></ThemeProvider>
+ <ThemeProvider theme={theme}></ThemeProvider>

更新逻辑切换主题模式

您现在将不交换整个主题对象,而是使用 useColorScheme 钩到光和暗模式之间切换. 参见上文使用说明或 MUI 文档 更多细节.

注:在少数情况下,有些样式可能应用不正确,因此需要明确声明具体模式.

    sx={{
    backgroundColor: statusColor || Colors.black[500],
    color: getIconColor(),
    ...theme.applyStyles('dark', {
        color: getIconColor(),
        backgroundColor: statusColor || Colors.black[500],
    }),
}}