CODEWITHSUNDEEP
reactjsmaterial-uifrontend
Vedant Shah
Vedant Shah

Reputation: 1386

Material UI Element css not working, why?

enter image description here

What could be going wrong for the css to not be working(The top bar - heading overlap)?

here is the component:

<FormControl fullWidth>
  {/* eslint-disable-next-line */}
  <InputLabel id="simple-select-label">GT Template</InputLabel>
  <Select labelId="simple-select-label" id="demo-simple-select-label" onChange={handleChange} value={gtTemplate}>
    <MenuItem value="employee/addemployeeimport">Add Employee Importer</MenuItem>
    <MenuItem value="lop-days">Employee LOP</MenuItem>
    <MenuItem value="lop-reversal">LOP Reversal Importer</MenuItem>
    <MenuItem value="employee/bankdetails">Employee Bank Details</MenuItem>
    <MenuItem value="loan-detail">Employee Loan Details</MenuItem>
    <MenuItem value="employee/employeecategory">Employee Category</MenuItem>
    <MenuItem value="resignation">Employee Resignation</MenuItem>

  </Select>
</FormControl>

Upvotes: 0

Views: 119

Answers (1)

ZomitaKa
ZomitaKa

Reputation: 545

You need to add label attribute to the Select element

<Select labelId="simple-select-label" id="demo-simple-select-label" onChange={handleChange} value={gtTemplate} label="GT Template">

And this may be usefull too https://mui.com/material-ui/react-select/

Upvotes: 2

Related Questions