Ant Design引入的组件样式不生效

最新推荐文章于 2024-07-01 17:17:22 发布

琹箐

最新推荐文章于 2024-07-01 17:17:22 发布

阅读量5.9k

点赞数 4

分类专栏： Ant Design

本文链接：https://blog.csdn.net/qq_45327886/article/details/114887426

版权

Ant Design 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、问题

使用Ant Design中的组件时,组件的样式不生效
具体问题：想使用Layout布局中的上中下布局；以前使用过，当时组件和样式是结合在一起的，只需要引入相应的组件并插入到自己的render函数中即可。但今天使用的时候发现组件和样式分开了
于是自己尝试将样式单独写入一个.css文件中，并在该组件的文件中引入。但结果不尽如人意，样式完全是混乱的

效果图

app.jsx

import React from 'react';

//导入路由组件
import {HashRouter,Route,Link} from 'react-router-dom';

//Ant Design 布局组件
import { Layout, Menu, Breadcrumb } from 'antd';
const { Header, Content, Footer } = Layout;
//Ant Design 样式文件
import './css/app.css'


export default class App extends React.Component{
    constructor(props){
        super(props);
        this.state={}
    }

    render(){
            return(
               <HashRouter>
                    <Layout className="layout">
                            <Header>
                            <div className="logo" />
                            <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
                                <Menu.Item key="1">nav 1</Menu.Item>
                                <Menu.Item key="2">nav 2</Menu.Item>
                                <Menu.Item key="3">nav 3</Menu.Item>
                            </Menu>
                            </Header>
                            <Content style={{ padding: '0 50px' }}>
                            <Breadcrumb style={{ margin: '16px 0' }}>
                                <Breadcrumb.Item>Home</Breadcrumb.Item>
                                <Breadcrumb.Item>List</Breadcrumb.Item>
                                <Breadcrumb.Item>App</Breadcrumb.Item>
                            </Breadcrumb>
                            <div className="site-layout-content">Content</div>
                            </Content>
                            <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
                        </Layout>            </HashRouter>
            )
          } 
    }

app.css

.site-layout-content {
    min-height: 280px;
    padding: 24px;
    background: #fff;
}

#components-layout-demo-top .logo {
    float: left;
    width: 120px;
    height: 31px;
    margin: 16px 24px 16px 0;
    background: rgba(255, 255, 255, 0.9);
}

.ant-row-rtl #components-layout-demo-top .logo {
    float: right;
    margin: 16px 0 16px 24px;
}

二、解决方法

Ant design中提供了显示编辑器
点击每一个组件下方的 “在CodeSandbox中打开” 或 “在CodePen中打开” 或 “在Stackblitz中打开”即可查看该组件完整的源代码——html、css、js。对照源代码修改自己的代码即可。
我点开后发现,自己的css文件中少了一句对Ant design样式的引入： @import '~antd/dist/antd.css';
将该语句添加到app.css文件中,组件和样式正常显示

修改后的app.css

@import '~antd/dist/antd.css';
.site-layout-content {
    min-height: 280px;
    padding: 24px;
    background: #fff;
}

#components-layout-demo-top .logo {
    float: left;
    width: 120px;
    height: 31px;
    margin: 16px 24px 16px 0;
    background: rgba(255, 255, 255, 0.9);
}

.ant-row-rtl #components-layout-demo-top .logo {
    float: right;
    margin: 16px 0 16px 24px;
}