无法更改ant design中Sider的宽度

Question

我尝试在 App.css 中添加.ant-layout-sider { width:500px }，我尝试给 Sider 组件 aclassName并添加width: 500px到该类，但没有成功。

这是我的组件

import React from 'react'
import { Image, Layout, Menu } from 'antd';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
} from '@ant-design/icons';

const { Header, Sider, Content } = Layout;

class AdminPage extends React.Component {
  state = {
    collapsed: false,
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  render() {
    return (
      <Layout className="full-screen">
        <Sider className='light-bg' trigger={null} collapsible collapsed={this.state.collapsed}>
            <div className='logo'>
                <Image src='./logo.png' />
            </div>
            <Menu
                className='menu-fix'
                theme="light"
                mode="inline"
                defaultSelectedKeys={['1']}
                items={[
                {
                    key: '1',
                    icon: <UserOutlined />,
                    label: 'Dashboard',
                },
                {
                    key: '2',
                    icon: <VideoCameraOutlined />,
                    label: 'Search Job',
                },
                {
                    key: '3',
                    icon: <UploadOutlined />,
                    label: 'Application',
                },
                {
                    key: '4',
                    icon: <UploadOutlined />,
                    label: 'Message',
                },
                {
                    key: '5',
                    icon: <UploadOutlined />,
                    label: 'Statistics',
                },
                ]}
            />
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }}>
            {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
              className: 'trigger',
              onClick: this.toggle,
            })}
          </Header>
          <Content
            className="site-layout-background"
            style={{
              margin: '24px 16px',
              padding: 24,
              minHeight: 280,
            }}
          >
            Content
          </Content>
        </Layout>
      </Layout>
    );
  }
}

export default AdminPage;

这是我的 App.css

.trigger {
    padding: 0 24px;
    font-size: 18px;
    line-height: 64px;
    cursor: pointer;
    transition: color 0.3s;
  }
  
.trigger:hover {
    color: #1890ff;
  }

.light-bg {
    background-color: #fff;
    width: 500px;
}

.menu-fix span{
    margin-left: 15px;
    margin-right: 9px;
}

.ant-menu > .ant-menu-item:hover,
.ant-menu > .ant-menu-submenu:hover,
.ant-menu > .ant-menu-item-active,
.ant-menu > .ant-menu-submenu-active,
.ant-menu > .ant-menu-item-open,
.ant-menu > .ant-menu-submenu-open,
.ant-menu > .ant-menu-item-selected,
.ant-menu > .ant-menu-submenu-selected {
  color: #003CFF;
  font-weight: bold;
}

.ant-menu-vertical .ant-menu-item::after,
.ant-menu-vertical-left .ant-menu-item::after,
.ant-menu-vertical-right .ant-menu-item::after,
.ant-menu-inline .ant-menu-item::after {
  border-right: 6px solid #003CFF;
  border-radius: 4px;
}

.ant-menu > .ant-menu-item:not(.ant-menu-item-selected) {
    color:rgba(0, 0, 0, 0.4);
}

.logo {
    margin:16px;
}

.site-layout .site-layout-background {
background: #fff;
}

.full-screen {
    min-height: 100vh;
}

我添加width:500px到light-bg课程中，但不起作用。知道如何更改 Sider 组件的宽度吗？

Answer 1

好吧，我发现你所要做的就是向 Sider 组件标签添加一个宽度属性，如下所示

<Sider width={500} className='light-bg' trigger={null} collapsible collapsed={this.state.collapsed}>