es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

La barra de la aplicación en React no se está ajustando correctamente al ancho.

02 Aug, 2023 Programación

En mi proyecto de react, estoy tratando de ajustar el ancho de la barra de la aplicación. Hasta ahora está empujada demasiado hacia la izquierda, como se muestra en la imagen de abajo.

La clase personalizada que estoy intentando usar no hace nada. No hay mensajes de error, simplemente no funciona.

¿Alguien ve lo que estoy haciendo mal?

import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";

const drawerWidth = 200; //240

const useStyles = makeStyles((theme) => {
 return {
page: {
  background: "#f1f1f1",
  width: "100%",
  padding: useTheme().spacing(3),
},
drawer: {
  width: drawerWidth,
},
drawerPaper: {
  width: drawerWidth,
},
root: {
  display: "flex",
},
active: {
  background: "#f4f4f4",
},
appbar: {
  width: `calc(100% - ${drawerWidth}px)`,
},
// toolbar: theme.mixins.toolbar,
};
 });

screenshot

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que la clase personalizada ‘appbar’ no se está aplicando al componente AppBar. Una solución posible podría ser agregar explícitamente el nombre de la clase al componente AppBar como se muestra a continuación:

    import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";

const drawerWidth = 200;

const useStyles = makeStyles((theme) => {
  return {
    appbar: {
      width: `calc(100% - ${drawerWidth}px)`,
    },
    // otros estilos
  };
});

function MyComponent() {
  const classes = useStyles();

  return (
    <div classname="{classes.root}">
      <appbar position="fixed" classname="{classes.appbar}">
        <toolbar>
          {/* tu contenido de barra de aplicaciones aquí */}
        </toolbar>
      </appbar>
      {/* otros componentes */}
    </div>
  );
}

    También asegúrate de haber importado y utilizado correctamente el hook useStyles. Debería ser utilizado dentro del componente y pasado como una className al componente que necesita los estilos aplicados.

Comments are closed.