CODEWITHSUNDEEP
reactjsmaterial-uijss
RoninS28
RoninS28

Reputation: 53

Margin not working in TextField using MUI makeStyles

I am trying to add margin to my TextField component by making an object of makestyles using MUI v5. The background color is reflecting in the component but not margin and padding. Here is my code

import React, { useState } from 'react'
import { Typography } from '@mui/material'
import { Button } from '@mui/material'
import { ButtonGroup } from '@mui/material'
import { Container } from '@mui/material'
import { makeStyles } from '@mui/styles';
import TextField from '@mui/material/TextField';

Here I have used makeStyles

const useStyles = makeStyles({
  field: {
    // paddingTop: '20px',
    padding: '100px',
    backgroundColor: 'red',
    marginBottom: '100px',
    // margin: 100
    // display: 'block'
  },
});

export default function Create() {
  const classes = useStyles()
return (
    <Container>


      <Typography
        variant="h6"
        component="h2"
        gutterBottom
        color="textSecondary"
      >
        Create a New Note
      </Typography>

      <form noValidate autoComplete="off" >
        <TextField
          
          className={classes.field}
          label="Note Title"
          variant="outlined"
          color="secondary"
          fullWidth
          required
          error={titleError}
        >
        </TextField>
        <Button
          type="submit"
          color="secondary"

          variant="outlined"
          onClick={() => console.log("you clicked me")}

          endIcon={<KeyboardArrowRightOutlinedIcon />}

        >Submit </Button>
      </form>

  </Container>
  )
}

All of this is in a single file

Here is the screenshot.

Upvotes: 3

Views: 4868

Answers (1)

NearHuscarl
NearHuscarl

Reputation: 81340

TextField is just a wrapper component of the Input inside it, to target the input for styling, you can use InputProps:

<TextField
  InputProps={{
    className: classes.field
  }}

EDIT: The margin doesn't work in your TextField because of the CSS specificity. Your style is overrode by the other one from emotion, to fix it, double the className using this technique:

const useStyles = makeStyles({
  field: {
    // append the same classname to increase the specificity
    // output has something like: .makeStyles-field-5.makeStyles-field-5
    "&&": {
      marginBottom: "100px"
    }
  }

Codesandbox Demo

Upvotes: 4

Related Questions