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

看效果