Estoy utilizando un menú dentro de un [layout de ant][1] el cual claro ya trae su estilo y configuración, quiero aplicarle algunos cambios propios de estilos, pero no los respeta, al no ser experto en el tema de **css** no se cual sea la forma mas recomendable de realizar esos cambios. yo utilice lo siguiente para hacer los cambios, Funciona pero sera muy molesto poner `!important` en todas las lineas que mas adelante quiera editar. li { height: 60px !important; line-height: 20px !important; overflow: inherit !important; white-space: unset !important; } Donde lo utilizo es en `SiderMenu` const SiderMenu = () => { return ( <Sider style={{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, }} > <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}> {declaraciones.declaraciones.map((e) => ( <Menu.Item id='menuItem' className='miStyle'> <Tooltip title={e}> {e} </Tooltip> </Menu.Item> ))} </Menu> </Sider> ); } El cual es llamado en `HomePage` dentro de un `Layout` componente de [Ant Design][2] const HomePage = () => { return ( <Layout> <SiderMenu /> <Layout className="site-layout" style={{ marginLeft: 200 }}> <Header className="site-layout-background" style={{ padding: 0 }} /> <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}> <div className="site-layout-background" style={{ padding: 24, textAlign: 'center' }}> <CardSucursal /> <Button >Terminar</Button> </div> </Content> <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer> </Layout> </Layout> ); } Existe alguna otra forma de poder colocar mi configuración de estilos a los elementos ? [1]: https://ant.design/components/layout/ [2]: https://ant.design/index-cn