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
看效果