React+antd 使用了dark主题没效果

任小可

已于 2024-04-25 10:28:23 修改

阅读量540

点赞数 4

CC 4.0 BY-SA版权

分类专栏： # react+antd 文章标签： react

于 2024-04-25 10:26:42 首次发布

本文链接：https://blog.csdn.net/xk3286/article/details/132109356

react+antd 专栏收录该内容

3 篇文章

订阅专栏

文章讲述了在Vite+React+antd环境中启用dark主题时遇到的问题，发现Form组件未应用全局样式，通过添加Layout并设置固定高度解决了主题在Form组件外的部分不生效的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React+antd 使用了dark主题没效果

使用了vite+React+antd 环境下，使用了dark主题没效果

使用了vite+React+antd 环境下，使用了dark主题没效果

这是我的框架结构
在这里插入图片描述
很简单一个案例

# main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { App, ConfigProvider, theme } from 'antd'

import './index.css'
import MyApp from './App2.jsx'

ReactDOM.createRoot(document.getElementById('root')).render(
  <ConfigProvider 
    theme={{
      algorithm: theme.darkAlgorithm, # 使用算法 来设定暗黑
    }
  }>
      <App>
        <React.StrictMode>
          <MyApp />
        </React.StrictMode>,
      </App>
  </ConfigProvider>
)

App.jsx

import { Form, Input, Typography } from 'antd'
import React from 'react'

const App = () => {
  return (
    <>
        <Form>
            <Input.Search placeholder='请输入用户名' size={'large'} style={{width:300}} />
            <Typography.Paragraph>
              这是一段文字<br/>
              <Typography.Text mark> 标记性文字</Typography.Text>
            </Typography.Paragraph>
        </Form>
    </>
  )
}

export default App

然后运行看到的效果是这样
在这里插入图片描述

这是由于Form不是布局格式的组件，无法应用到整个屏幕，添加layout 布局即可

import { Form, Input, Layout, Typography } from 'antd'
import React from 'react'

const App = () => {
  return (
    <>
      <Layout style={{height:'100vh'}}> # 这里添加了高度，默认是按照内容高度来显示，高度以外的就不在是暗黑主题了
        <Form>
            <Input.Search placeholder='请输入用户名' size={'large'} style={{width:300}} />
            <Typography.Paragraph>
              这是一段文字<br/>
              <Typography.Text mark> 标记性文字</Typography.Text>
            </Typography.Paragraph>
        </Form>
      </Layout>
    </>
  )
}

export default App

看效果

在这里插入图片描述