reactjs - 为什么按钮文本不会在 Material UI 中调整大小？

Question

我有一个Search按钮和其他一些按钮，但只有Search按钮文本字体大小没有减小，你知道为什么吗？

import React from "react";
import event1 from "../assets/images/event1.png";
import event2 from "../assets/images/event2.png";
import event3 from "../assets/images/event3.png";
import event4 from "../assets/images/event4.png";
import scene from "../assets/images/scene.png";
import styles from "../assets/styles/HomePage.module.css";
import { Container, Box, TextField, Button } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyle = makeStyles({
  root: {
    backgroundColor: "#f6d7dc",
    fontFamily: "ASMBold",
    height: "100%"
  },
  container: {
    width: "80%",
    paddingTop: "20px"
  },
  search: {
    border: "5px solid #184cdf",
    padding: "22px 0",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    fontSize: "20px",
    margin: 0
  },
  longInput: {
    width: "400px"
  },
  searchButton: {
    backgroundColor: "#184cdf",
    color: "#ec8562",
    textTransform: "uppercase",
    fontWeight: "bold",
    height: "55px",
    width: "100px"
  }
});

function HomePage(props) {
  const classes = useStyle();
  return (
    <div className={classes.root}>
      <Container maxWidth="xl" className={classes.container} disableGutters>
        <Box className={classes.search}>
          <TextField variant="outlined" placeholder="city or place" />
          <TextField variant="outlined" placeholder="dates" />
          <TextField
            variant="outlined"
            placeholder="artists / venues / events"
            className={classes.longInput}
          />
          <Button varian="contained" className={classes.searchButton}>
            Search
          </Button>
        </Box>
      </Container>
    </div>
  );
}

export default HomePage;

标签： reactjsmaterial-ui