Tencent Cloud

Recent Pages

React

最后更新时间：2024-10-25 11:34:50

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