Provider

import { WisteriaProvider } from 'wisteria-ui';

用法

主题切换

<WisteriaProvider theme={{ scheme: 'light' }} />

组件库内置亮色和暗色主题。

获取主题

组件库提供 useTheme hook 来获取当前主题。

import { useTheme } from 'wisteria-ui';
 
const App = () => {
  const theme = useTheme();
 
  return <main>App</main>;
};

动态主题

动态主题切换基于 CSS 变量 实现。

<WisteriaProvider
  theme={{
    scheme: 'light',
    colors: {
      primary: '#6750a4',
      primaryContainer: '#e9ddff',
      secondary: '#625b71',
      secondaryContainer: '#e8def8',
      tertiary: '#7e5260',
      tertoaryContainer: '#ffd9e3'
    }
  }}
/>

API

theme.scheme 为 undefined 时，会根据系统主题自动切换主题。

属性	说明	类型	默认值
theme.scheme	主题	light \| dark	-
theme.colors	自定义样式	ThemeColors	-
fallback	页面异常时显示	VNode	-
onError	页面异常回调	Function	-

Radio Surface