Can't change width of Sider in ant design

Question

I tried adding .ant-layout-sider { width:500px } in App.css, I tried giving the Sider component a className and adding width: 500px to that class but no luck.

Here is my component

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;

Here is my 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;
}

I added width:500px to light-bg class but that doesn't work. Any idea how can I change the width of the Sider component?

Answer 1

Ok I figured it out all you have to do is add a width attribute to the Sider component tag like this

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