2

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 ?

0

1 respuesta 1

5

Basándome lo descrito sobre Especificidad.

En lugar de usar !important, considera:

  1. Hacer un mejor uso de las propiedades en cascada de CSS.

  2. Usar reglas más específicas. Indicando uno o más elementos antes del elemento que estás seleccionando, la regla se vuelve más específica y gana mayor prioridad

Por lo tanto unicamente agregue un id al componente Menu.Item que esta dentro del Slider, quedando así

<Menu.Item id='menuItem'>
    <Tooltip title={e}>
        {e}
    </Tooltip>
</Menu.Item>

y el código de mi CSS de esta forma

#menuItem {
    height: 60px;
    line-height: 20px;
    overflow: inherit;
    white-space: unset;   
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.