Skip to main content
se eliminaron 34 caracteres en el cuerpo
Origen Enlace
Richard
  • 1.5k
  • 3
  • 19
  • 52
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'>Item>
                        <Tooltip title={e}>
                            {e}
                        </Tooltip>
                    </Menu.Item>
                ))}

            </Menu>
        </Sider>
    );
}
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>
    );
}
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>
    );
}
se añadieron 1727 caracteres en el cuerpo
Origen Enlace
Richard
  • 1.5k
  • 3
  • 19
  • 52

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

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 ?

Existe alguna otra forma de poder colocar mi configuración de estilos a los elementos ?

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

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 ?

Origen Enlace
Richard
  • 1.5k
  • 3
  • 19
  • 52

¿como dar prioridad a mi estilo?

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;   
}

Existe alguna otra forma de poder colocar mi configuración de estilos a los elementos ?