Estoy utilizando un menú dentro de un layout de ant 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>
<Tooltip title={e}>
{e}
</Tooltip>
</Menu.Item>
))}
</Menu>
</Sider>
);
}
El cual es llamado en HomePage
dentro de un Layout
componente de Ant Design
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 ?