Question

我正在使用带有反应的材料 ui。我是初学者。两个问题：

如何将 TextFields（表单中的 TextFields）颜色设置为白色。占位符目前是黑色的，所以它是我写的文字。我尝试使用 makeStyles 并将颜色设置为白色，但无法使其正常工作。
如何使用材质ui设置背景色，而不是直接在css中设置。我试过主题化，但这也不起作用。我觉得使用 Material ui 设置它会使页面更加动态，或者这不是这样做的方式？

我已经为此苦苦挣扎了好几天，我可能做错了什么。所以，我需要帮助。

这是代码。不多：

App.js：

import { makeStyles } from "@material-ui/core/styles";
import { Grid, TextField, Button, Typography } from "@material-ui/core";

function App() {
  const useStyles = makeStyles((theme) => ({
    textField: {
      width: "100%",
    },
  }));

  const classes = useStyles();

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Hi");
  };

  return (
    <>
      <Grid container spacing={3}>
        <Grid item xs={6}></Grid>

        <Grid item xs={6} sm={6}>
          <Typography variant="h2" color="primary">
            Some information about you
          </Typography>
          <form onSubmit={handleSubmit}>
            <TextField
              label="Name"
              variant="filled"
              className={classes.textField}
            ></TextField>
            <TextField
              label="Phone Number"
              variant="filled"
              className={classes.textField}
            ></TextField>
            <Button
              type="submit"
              value="Submit"
              color="primary"
              variant="contained"
            >
              Submit
            </Button>
          </form>
        </Grid>
      </Grid>
    </>
  );
}

export default App;

CSS：

body {
  margin: 0;
  background-color: #39445a;
}

Answer 1

如果您想使用自己的背景而不是浏览器提供的主题，则应使用 CSSBaseLine。此外，如果您想自定义您自己的主题，您应该使用 createMuiTheme 此外，我还尝试通过创建一个单独的主题和 APPForm 文件以及一个单独的 APP.js 文件来改进您的代码结构。它有助于代码可读性。

//Theme.js
import { createMuiTheme } from "@material-ui/core/styles";

const arcBlue = "#0B72B9";
const arcOrange = "#FFBA60";

export default createMuiTheme({
  palette: {
    common: {
      arcBlue: `${arcBlue}`,
      arcOrange: `${arcOrange}`
    },
    primary: {
      main: `${arcBlue}`
    },
    secondary: {
      main: `${arcOrange}`
    }
  },
  typography: {
    h3: {
      fontWeight: 200,
      fontSize: "2rem"
    },
    TextField: {
      fontFamily: "Raleway",
      fontWeight: "700",
      textTransform: "none",
      fontSize: "1rem"
    }
  }
});

//APPForm.js
import { makeStyles } from "@material-ui/core/styles";
import { Grid, TextField, Button, Typography } from "@material-ui/core";

function Form() {
  const useStyles = makeStyles((theme) => ({
    textField: {
      ...theme.typography.TextField,
      width: "100%"
    }
  }));

  const classes = useStyles();

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Hi");
  };
  return (
    <>
      <Grid container spacing={3}>
        <Grid item xs={6}></Grid>

        <Grid item xs={6} sm={6}>
          <Typography variant="h2" color="primary">
            Some information about you
          </Typography>
          <form onSubmit={handleSubmit}>
            <TextField
              label="Name"
              variant="filled"
              className={classes.textField}
            ></TextField>
            <TextField
              label="Phone Number"
              variant="filled"
              className={classes.textField}
            ></TextField>
            <Button
              type="submit"
              value="Submit"
              color="primary"
              variant="contained"
            >
              Submit
            </Button>
          </form>
        </Grid>
      </Grid>
    </>
  );
}

export default Form;

//APP.js

import { makeStyles } from "@material-ui/core/styles";
import { Grid, TextField, Button, Typography } from "@material-ui/core";
import { ThemeProvider } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";

import Form from "./Form.js";
import theme from "./Theme";

function App() {
  return (
    <div className="App">
      <ThemeProvider theme={theme}>
        <CssBaseline /> // using cssBaseLine
        <Form />
      </ThemeProvider>
    </div>
  );
}
export default App;

您可以使用很多属性。遵循 Material UI 的官方文档。您可以在此处自定义您的 theme 属性。

材质 ui 中 TextField 形式的白色

1 个答案: