Use contrastText 

Standards

Material User Interface is a React Component Library. Here you find Strategies, Best Practices, Standards and Examples for using MUI.

Material UI

When ever using your own coloring on a component, make sure you use contrastText to make sure any text and/or icons are readable.

const TitleTextField = styled(TextField)(({ theme }) => ({
  'label': { color: theme.palette.secondary.contrastText },
  '& .MuiOutlinedInput-root': 
  { color: theme.palette.secondary.contrastText },
  '& .MuiOutlinedInput-notchedOutline': 
  { borderColor: theme.palette.secondary.contrastText }
}));

const EditTitleForm = () => {
 // code...

  return ( 
    <Box sx={{ bgColor: 'secondary.main'}}>
      <TitleTextField label="Edit Title" />
    </Box>
  )
}

Material UI : Standards Use contrastText

Material UI : Standards
Use contrastText