Tencent Cloud

Recent Pages

React

最后更新时间：2024-11-22 11:55:28

React UIKit 目前提供了明亮和黑暗两种预置主题。您可以通过传递 theme 属性到根组件 <UIKitProvider> 上来切换主题。另外您也可以完全自定义颜色来适应您自己的品牌颜色。
﻿
﻿
﻿
预置主题
React UIKit 目前提供了明亮和黑暗两种预置主题。您可以在根组件 <UIKitProvider> 上设置 theme 属性'light'（默认）或'dark'，以切换当前主题。
说明：
<UIKitProvider> 如果不传递 theme 属性则默认使用明亮主题。
使用黑暗主题示例：
import { UIKitProvider } from '@tencentcloud/uikit-base-component-react';
import '@tencentcloud/chat-uikit-react/dist/esm/index.css';
﻿
export default function App() {
  // language support en-US(default) / zh-CN / ja-JP / ko-KR / zh-TW
  // theme support light(default) / dark
  return (
    <div style={{display: 'flex', height: '100vh'}}>
      <UIKitProvider language='en-US' theme='dark'>
      
      </UIKitProvider>
    </div>   
  );
}
使用 useState 管理主题示例：
import { useState } from 'react';
import { UIKitProvider } from '@tencentcloud/uikit-base-component-react';
import '@tencentcloud/chat-uikit-react/dist/esm/index.css';
﻿
export default function App() {
  const [theme, setTheme] = useState('light');
﻿
  return (
    <div style={{display: 'flex', height: '100vh'}}>
      <UIKitProvider theme={theme}>
        {/* ... */}
      </UIKitProvider>
    </div>
  );
}
﻿