web-dev-qa-db-fra.com

La typographie Material-UI ne se centre pas dans AppBar

J'essaie de centrer le texte dans une AppBar. J'ai essayé de centrer le texte dans l'élément Typography, en utilisant align = "center", textAlign = "center" et style = {{align: "center"}}, entre autres:

class App extends React.Component {
  render() {
    return (
      <div>
        <AppBar>
          <Toolbar>
            <Typography
              variant="h6"
              color="inherit"
              style={{ align: "center" }}
            >
              Header
            </Typography>
          </Toolbar>
        </AppBar>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

... mais cela ne fonctionne que si je supprime la barre d'outils. Mais alors je devrais changer manuellement la hauteur de l'AppBar, ce que je n'ai pas trouvé non plus. En outre, chaque instance que j'ai vue de l'AppBar utilise la barre d'outils. Toutes les solutions que j'ai trouvées qui pourraient résoudre ce problème sont obsolètes et ne fonctionnent pas (il n'y a plus de ToolbarGroup).

J'ai également essayé d'utiliser un style const et d'exporter l'AppBar avecStyles ():

const styles = {
  root: {
    flexGrow: 1
  },
  typography: {
    align: "center"
  }
};

function Header(props) {
  const { classes } = props;

  return (
    <div className={classes.root}>
      <AppBar>
        <Toolbar>
          <Typography
            variant="h6"
            color="inherit"
            className={classes.typography}
          >
            Header
          </Typography>
        </Toolbar>
      </AppBar>
    </div>
  );
}

Header.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(Header);

mais cela ne fonctionne pas non plus. Je pense que cela devrait être simple, je ne suis pas sûr de ce qui me manque.

cssreactjsmaterial-ui
6
maranathaman

Le composant AppBar est conçu pour rendre ses enfants sous forme d'éléments flexibles.

La propriété CSS comme text-align est utilisée pour l'alignement horizontal des enfants qui est affiché différent d'un élément flexible, par exemple comme cellule de tableau, bloc ou bloc en ligne.

Les éléments flexibles peuvent être centrés horizontalement à l'aide de justify-content ou align-self Propriété CSS ou plusieurs autres .

const styles = {
  root: {
    flexGrow: 1,
  },
  appbar: {
    alignItems: 'center',
  }
};

function Header(props) {
  const { classes } = props;

  return (
    <div className={classes.root}>
      <AppBar
        className={classes.appbar}
        color="default"
        position="static"
      >
        <!--...-->
      </AppBar>
    </div>
  );
}
6
Oluwafemi Sule
const styles = {
  root: {
    flexGrow: 1
  },
  typography: {
flexGrow: 1,
    align: "center"
  }
};

function Header(props) {
  const { classes } = props;

  return (
    <div className={classes.root}>
      <AppBar>
        <Toolbar>
          <Typography
            variant="h6"
            color="inherit"
            className={classes.typography}
          >
            Header
          </Typography>
        </Toolbar>
      </AppBar>
    </div>
  );
}

Header.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(Header);

utilisez flexGrow, fera l'affaire et est également réactif sur mobile

0
Rajitha Gunathilake