White color in TextField form in material ui

user_15598092 0
Viewed 785

Im using material ui with react. Im a beginner. Two questions:

  1. How do I set the TextFields (the TextFields in the form) color to be white. The placeholder is currently black, so it the text when i write in it. I have tried to use makeStyles and set the color to white, but cant get it to work.

  2. How do I set the backgroundcolor with material ui instead of doing it directly in the css. I have tried theming but that too doesnt work. I feel like setting it using material ui will make the page more dynamic, or is that just not the way of doing it?

I have struggeled with this for days, and im probably doing something wrong. So, I need help.

A link to how the site looks right now

Here is the code. Its not much:

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;
}
material-ui reactjs
1 Answers

You should use CSSBaseLine if you want to use your own background rather than the theme provided by the browser. Also if you want to customize your own theme you should use createMuiTheme Also I've tried to improve your code structure by creating a separate theme and APPForm file and a separate APP.js file. It helps code readability.

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

There are a lot of property you can use. Follow the official doc of material UI. Here you can customize your theme property.

user_123740770
Related