时间戳

首页 > 解决方案 > 如何将标题扩展到整个页面宽度？

javascript - 如何将标题扩展到整个页面宽度？

问题描述

如何将标题扩展到整页？我试过 margin-left & right 但这不起作用。

头文件.css

.header{
    background: green;
    height: 70px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    left: 0;
    right: 0;
} 


  .header-right {
    float: right;
  }

  @media screen and (max-width: 500px) {
    .header-right {
      float: none;
    }
  }

这是我的 app.tsx 文件：

const Header = () => (
  <div className = 'header'>
  <h1>Instaride</h1>
  <div className="header-right">
    <Button> Sign In</Button>
    <Button> Contact</Button>
  </div>
</div>
);

export default Header;

我也已经尝试过了：

body, html{
    margin:0;
    padding:0;
}

标签： javascripthtmlcssreactjsmaterial-ui

解决方案

只需添加document.body.style.margin = 0;您的组件。

这是您使用 MUI 样式设置的组件，

import React from "react";
import { makeStyles } from "@material-ui/styles";
import { Button } from "@material-ui/core";

const useStyles = makeStyles({
  header: {
    background: "green",
    height: "70px",
    width: "100%",
    display: "flex",
    justifyContent: "space-between",
    marginBottom: "25px",
    left: "0",
    right: "0"
  },
  headerRight: {
    float: "right",
    color: "blue"
  }
});

export default function Header() {
  document.body.style.margin = 0;

  const classes = useStyles();
  return (
    <div className={classes.header}>
      <h1>Instaride</h1>
      <div className={classes.headerRight}>
        <Button> Sign In</Button>
        <Button> Contact</Button>
      </div>
    </div>
  );
}

我还为您创建了沙箱：https ://codesandbox.io/s/serene-sun-n5rth?fontsize=14&hidenavigation=1&theme=dark

推荐阅读