0
193
ViewsLa parte inferior del borde hace que los íconos de la interfaz de usuario del material sean más pequeños cuando se desplazan
Estoy trabajando en esta aplicación React donde el encabezado tiene algunos íconos de Material UI. He estado tratando de aplicar un borde que se mostraría en la parte inferior de la cabecera cuando se pasara el cursor sobre cada icono. Pero ahora mismo los bordes están muy cerca de cada uno de sus respectivos iconos.
Otro problema es que los íconos se vuelven más pequeños cuando se desplazan. Llevo horas intentando arreglarlo pero nada parece funcionar.
Los iconos deben tener un tamaño de fuente de 1,6 rem y el borde debe ser de 4 píxeles. ¿Cómo puedo arreglarlo?
Aquí está el CodeSandbox .
Aquí está el código para el componente de encabezado:
import React from "react"; import "./Header.css"; import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew"; import SettingsIcon from "@mui/icons-material/Settings"; const Header = () => { return ( <header className="header"> <div className="header__leftContainer"> <h1>Logo</h1> </div> <div className="header__rightContainer"> <SettingsIcon className="header__rightContainer__icons" /> <PowerSettingsNewIcon className="header__rightContainer__icons" /> </div> </header> ); }; export default Header;Aquí está el css:
.header { width: 100%; background: yellow; display: flex; justify-content: space-between; align-items: center; } .header__leftContainer, .header__rightContainer { padding: 15px 40px; } .header__leftContainer h1 { color: red; } .header__rightContainer svg { font-size: 1.6rem; margin: 0 15px; cursor: pointer; } .header__rightContainer svg:last-child { margin: 0 !important; } .header__rightContainer svg:hover { border-bottom: 4px solid blue; }3 answers
Answer question0
En lugar de aplicar relleno a su contenedor izquierdo y derecho, establezca una altura fija de su encabezado. Prueba esto:
.header { width: 100%; background: yellow; display: flex; justify-content: space-between; align-items: center; height: 4rem; } .header__leftContainer, .header__rightContainer { height: 100%; display: flex; } .header__leftContainer h1 { color: red; } .header__rightContainer svg { font-size: 1.6rem; margin: 0 15px; cursor: pointer; height: 100%; border-bottom: 4px solid transparent; } .header__rightContainer svg:last-child { } .header__rightContainer svg:hover { border-bottom: 4px solid blue; }0
Intenté esto:
.header { width: 100%; background: yellow; display: flex; justify-content: space-between; align-items: center; padding: 15px 40px; } .header__leftContainer h1 { color: red; } .header__rightContainer { display: flex; flex-direction: row; } .header__rightContainer__icons { padding: 8px 24px; border-bottom: 4px solid yellow; } .header__rightContainer__icons:hover { border-bottom: 4px solid blue; }y
import React from "react"; import "./Header.css"; import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew"; import SettingsIcon from "@mui/icons-material/Settings"; const Header = () => { return ( <header className="header"> <div className="header__leftContainer"> <h1>Logo</h1> </div> <div className="header__rightContainer"> <div className="header__rightContainer__icons"> <SettingsIcon /> </div> <div className="header__rightContainer__icons"> <PowerSettingsNewIcon /> </div> </div> </header> ); }; export default Header;Otro problema es que los íconos se vuelven más pequeños cuando se desplazan.
Resolví este problema y logré organizar el código para que sea más fácil de administrar. Siéntase libre de ajustar el ancho del borde cambiando el relleno horizontal en .header__rightContainer__icons
0
Cambia esto
.header__rightContainer svg:hover { border-bottom: 4px solid blue; }a
.header__rightContainer svg:hover { box-shadow: 0px 4px 0px 0px blue; } 