web-dev-qa-db-ja.com

Material-UIタイポグラフィはAppBarの中央にありません

テキストをAppBarの中央に配置しようとしています。私は、特にタイポグラフィ要素でテキストを中央揃えしてみました。align= "center"、textAlign = "center"、style = {{align： "center"}}などです。

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"));

...しかし、ツールバーを削除しないと機能しません。しかし、その後、AppBarの高さを手動で変更する必要があり、その方法も見つけられませんでした。さらに、AppBarのすべてのインスタンスでツールバーを使用しています。これに対処できる解決策は、すべて 旧式 および 機能しない （ToolbarGroupなどはありません）です。

Constスタイルを使用して、AppBar withStyles（）をエクスポートすることも試みました。

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

しかし、それも機能しません。私はこれが簡単なはずだと思っています、私は何が欠けているのか分かりません。

cssreactjsmaterial-ui
6
maranathaman

AppBarコンポーネント は、子をフレックスアイテムとしてレンダリングするようにスタイル設定されています。

text-align などのCSSプロパティは、フレックスアイテムとは異なるように表示される子の水平方向の配置に使用されます。テーブルセル、ブロック、またはインラインブロックとして。

Flexアイテムは、 justify-contentまたはalign-self CSSプロパティまたはその他のプロパティ 。

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

flexGrowを使用して、トリックを行い、モバイルでも応答します

0
Rajitha Gunathilake