tencent cloud

腾讯 RTC 免费试用多种产品提升用户参与度

文档反馈

即时通信 IM
最后更新时间: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>
);
}


产品类别

文档章节

React

联系我们

联系我们,为您的业务提供专属服务。

技术支持

如果你想寻求进一步的帮助,通过工单与我们进行联络。我们提供7x24的工单服务。

7x24 电话支持
中国香港
+852 800 906 020 (免费)
美国
+1 844 606 0804 (免费)
英国
+44 808 196 4551 (免费)
加拿大
+1 888 605 7930 (免费)
澳大利亚
+61 1300 986 386 (免费)
EdgeOne 热线
+852 300 80699
更多本地服务热线陆续新增中