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

看效果

在这里插入图片描述

  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
很抱歉,我是一个语言模型,无法提供完整的代码实现。但我可以给您提供一些思路和代码片段。 1. 创建 react 应用 使用 create-react-app 快速创建一个 react 应用: ``` npx create-react-app my-app cd my-app npm start ``` 2. 安装 antdantv ``` npm install antd antv --save ``` 3. 创建两个页面 创建两个页面,分别为节点和边的增删页面和图信息展示页面。 ``` import React from 'react'; import { Button } from 'antd'; function AddNodeAndEdge() { return ( <div> <Button type="primary">增加节点</Button> <Button type="primary">增加边</Button> <Button type="danger">删除节点</Button> <Button type="danger">删除边</Button> </div> ); } export default AddNodeAndEdge; ``` ``` import React from 'react'; import { List } from 'antd'; function GraphInfo(props) { const { data } = props; return ( <List dataSource={data} renderItem={(item) => ( <List.Item> <div>{item.name}</div> <div>{item.type}</div> <div>{item.description}</div> </List.Item> )} /> ); } export default GraphInfo; ``` 4. 创建菜单栏和路由 使用 antd 的 Menu 组件创建菜单栏,并使用 react-router-dom 库实现页面路由。 ``` import React from 'react'; import { Menu } from 'antd'; import { Link } from 'react-router-dom'; function MyMenu() { return ( <Menu theme="dark" mode="horizontal"> <Menu.Item key="1"> <Link to="/">增删节点和边</Link> </Menu.Item> <Menu.Item key="2"> <Link to="/graph-info">图信息展示</Link> </Menu.Item> </Menu> ); } export default MyMenu; ``` ``` import React from 'react'; import { Switch, Route } from 'react-router-dom'; import AddNodeAndEdge from './AddNodeAndEdge'; import GraphInfo from './GraphInfo'; function MyRouter() { return ( <Switch> <Route exact path="/"> <AddNodeAndEdge /> </Route> <Route path="/graph-info"> <GraphInfo data={[]} /> </Route> </Switch> ); } export default MyRouter; ``` 5. 使用 redux 管理数据 安装 redux 和 react-redux 库并创建 store 和 reducer。 ``` npm install redux react-redux --save ``` ``` import { createStore } from 'redux'; const initialState = { nodes: [], edges: [], }; function rootReducer(state = initialState, action) { switch (action.type) { case 'ADD_NODE': return { ...state, nodes: [...state.nodes, action.payload], }; case 'ADD_EDGE': return { ...state, edges: [...state.edges, action.payload], }; case 'DELETE_NODE': return { ...state, nodes: state.nodes.filter((node) => node.id !== action.payload), }; case 'DELETE_EDGE': return { ...state, edges: state.edges.filter((edge) => edge.id !== action.payload), }; default: return state; } } const store = createStore(rootReducer); export default store; ``` 使用 react-redux 库将 store 传递给组件。 ``` import React from 'react'; import { Provider } from 'react-redux'; import store from './store'; import MyMenu from './MyMenu'; import MyRouter from './MyRouter'; function App() { return ( <Provider store={store}> <div> <MyMenu /> <MyRouter /> </div> </Provider> ); } export default App; ``` 6. 实现节点和边的增删逻辑 使用 react-redux 库的 useSelector 和 useDispatch hooks 将 store 中的数据和 dispatch 方法传递给组件。 ``` import React from 'react'; import { Button } from 'antd'; import { useSelector, useDispatch } from 'react-redux'; function AddNodeAndEdge() { const nodes = useSelector((state) => state.nodes); const edges = useSelector((state) => state.edges); const dispatch = useDispatch(); const handleAddNode = () => { const id = Math.max(...nodes.map((node) => node.id)) + 1; dispatch({ type: 'ADD_NODE', payload: { id }, }); }; const handleAddEdge = () => { const id = Math.max(...edges.map((edge) => edge.id)) + 1; dispatch({ type: 'ADD_EDGE', payload: { id }, }); }; const handleDeleteNode = (id) => { dispatch({ type: 'DELETE_NODE', payload: id, }); }; const handleDeleteEdge = (id) => { dispatch({ type: 'DELETE_EDGE', payload: id, }); }; return ( <div> <Button type="primary" onClick={handleAddNode}> 增加节点 </Button> <Button type="primary" onClick={handleAddEdge}> 增加边 </Button> <Button type="danger" onClick={() => handleDeleteNode(1)}> 删除节点 </Button> <Button type="danger" onClick={() => handleDeleteEdge(1)}> 删除边 </Button> </div> ); } export default AddNodeAndEdge; ``` 7. 实现图信息展示和点击展示属性逻辑 使用 react-redux 库的 useSelector hook 将 store 中的数据传递给组件,并在 List.Item 上使用 onClick 属性实现点击展示属性逻辑。 ``` import React from 'react'; import { List } from 'antd'; import { useSelector } from 'react-redux'; function GraphInfo(props) { const nodes = useSelector((state) => state.nodes); const edges = useSelector((state) => state.edges); return ( <List dataSource={nodes.concat(edges)} renderItem={(item) => ( <List.Item onClick={() => console.log(item)}> <div>{item.name}</div> <div>{item.type}</div> <div>{item.description}</div> </List.Item> )} /> ); } export default GraphInfo; ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值