why can t fill background-color of textfield material ui code example

Example 1: material ui color background

// import Box from Material-UI
import Box from '@material-ui/core/Box';

// Use bgcolor to set background color in box
<Box bgcolor="primary.main" />
<Box bgcolor="secondary.main" />
<Box bgcolor="error.main" />
<Box bgcolor="warning.main" />
<Box bgcolor="info.main" />
<Box bgcolor="success.main" />
<Box bgcolor="text.primary" />
<Box bgcolor="text.secondary" />
<Box bgcolor="text.disabled" />

Example 2: change text color material ui

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";

const WhiteTextTypography = withStyles({
  root: {
    color: "#FFFFFF"
  }
})(Typography);

export default function App() {
  return (
    <div className="App" style={{ backgroundColor: "black" }}>
      <WhiteTextTypography variant="h3">
        This text should be white
      </WhiteTextTypography>
    </div>
  );
}