J'essaie de créer AppBar découpé en haut de la page et survolant un autre tiroir avec React Hooks et Material Ui en utilisant le nom de la classe. Le tout comme décrit dans: https: // material-ui. com / demos / drawers / # clipped-under-the-app-bar
Nous avons donc
<div className={classes.root}>
<CssBaseline/>
<LoadingResults showLoading={showLoadingSpinner}/>
<AppBar position="fixed" className={classes.appBar} >
...
</AppBar>
....
}));
Et plus rouge:
const useStyles = makeStyles(theme => ({
root: {
display: 'flex',
height: '100%',
},
drawer: {
width: drawerWidth,
flexShrink: 0,
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
},
menuButton: {
marginRight: 20,
[theme.breakpoints.up('md')]: {
display: 'none',
},
},
Le problème est que le style appliqué avec className est ajouté en dernier élément de sorte qu'il ne remplace pas le style orignal:
class = "MuiPaper-root-12 MuiPaper-elevation4-18 MuiAppBar-root-3 MuiAppBar-positionFixed-4 MuiAppBar-colorPrimary-10 mui-fixed Hook-appBar-1b6f20g " p >
Je sais que je peux utiliser des styles en ligne, mais je me demande si je peux remplacer les styles en utilisant classNames avec des crochets comme c'était le cas avec l'approche des composants "hérités"?
Voici le bac à sable: https://codesandbox.io/s/w7njqorzy7 ? fontsize = 14
Ce qui se passe, c'est que dans le bac à sable, le code fonctionne correctement (barre d'applications sur le conteneur de gauche)
Mais lorsque le même projet est téléchargé et compilé, ce n'est pas correct:
En regardant le débogueur, les styles sont en ligne. Dans le bac à sable, les crochets se trouvent en bas:
Dans le navigateur, lorsque l'application est exécutée via" run start "c'est en haut :
Voilà donc la différence, mais pourquoi et comment résoudre ce problème?
3 Réponses :
Il s'est avéré que mon installation bootstrap.js avec de nouveaux styles était au mauvais endroit.
import { install } from '@material-ui/styles';
install();
Doit être exécuté avant l'importation d'un composant d'interface utilisateur matériel.
Vous pouvez remplacer les styles material-ui par des accessoires classes au lieu de classNames .
Par exemple
<AppBar position="fixed" classes={{root: classes.appBar}}>
Ici, j'ai utilisé la touche root pour remplacer, il existe de nombreuses autres touches avec lesquelles vous pouvez jouer.
Chaque composant Material-ui a une section api. Vous y trouverez la liste des clés de remplacement.
Quelques liens utiles -
https: // https: //material-ui.com/customization/components/#overriding-styles-with-class-names p >
la première URL est cassée
https://material-ui.com/ru/styles/advanced/ #makestyles
const useStyles = makeStyles({
root: {}, // a style rule
label: {}, // a nested style rule
});
function Nested(props) {
const classes = useStyles(props);
return (
<button className={classes.root}>
<span className={classes.label}> // 'jss2 my-label'
nested
</span>
</button>
);
}
function Parent() {
return <Nested classes={{ label: 'my-label' }} />
}
L'ordre des classes dans la propriété
classn'a aucune incidence sur les styles résultants. L'ordre qui compte est l'ordre dans lequel les définitions de classe CSS apparaissent (par exemple, l'ordre des éléments de styleJe l'ai mis à jour avec sandbox. Il s'avère que cela fonctionne différemment dans le bac à sable et non.
Pour utiliser
@ material-ui / styles, vous devez effectuer l'étape de bootstrap ( material-ui.com/css-in-js/basics/... )Merci @JoshWooding. J'ai fait installer ce fichier bootstrap avec de nouveaux styles, mais votre commentaire m'a incité à le réexaminer. Il s'est avéré qu'il était importé après les composants matériels de l'interface utilisateur et que cela devrait être fait en premier lieu.