React material-ui TextField, the input is white

Question

I have started using material-ui, but I have problems with all the Textfields, they do not render well when I copy and paste the examples from the web

I installed:

yarn add @material-ui/core
yarn add fontsource-roboto
yarn add @material-ui/icons
yarn add @material-ui/lab
yarn add @material-ui/pickers
yarn add @date-io/[email protected] date-fns
yarn add @material/react-text-field

'Required *' and 'Date picker dialog' are not seen because the input color is white

[ no content][2]

For example for the input below (pure textfield) the code is:

import TextField from '@material-ui/core/TextField';
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
<TextField required id="standard-required" label="Required" defaultValue="Hello World" />

On the console there are no errors, but the style is not good. Component performance is good

this is not a error. you simply don't know or haven't tried how to change the styling of the input box. I would strongly recommend spending some time with react docs reactjs.org/docs/getting-started.html and some css. — Jay
this is another good place to start - developer.mozilla.org/en-US/docs/Learn/Front-end_web_developer it has a nice, easy introduction to styling and CSS. — Jay
Thank you ! The problem is not specifying the input type. I did not understand the error because I copy and paste the code from the web where it works correctly. But I still don't understand why the code works in codesandbox but not on my machine. — Apyc
that is the thing. give yourself a quick run with some CSS basics, and you will find out what is happening and why. further, in the long run, it will help you ask high quality questions, which means, we can help you that much faster. — Jay
Thanks Jay. As I am starting I find it difficult to understand some differences between the code that works on your website but not on my machine. As for example KeyboardDatePicker, on my machine it paints a border for the focus on the icon to display the calendar and on the calendar numbers. I'm going to keep researching and reading, but it's difficult because I can't find any information. Thanks for your hint. — Apyc

Apyc Apyc · Accepted Answer · 2020-09-27T06:45:00

The problem is that I did not specify the type of input (type="input"). For the textfield object:

<div style={{'marginTop':'20px'}} >
                <TextField
                style={{'width':'50%'}}
                id="outlined-password-input"
                label="Name"
                type="input" ----> this!!!!!!!!!!!
                autoComplete="current-password"
                variant="outlined"
              />

For the Autocomplete object:

<Autocomplete
  multiple
  id="checkboxes-tags-demo"
  options={this.top100Films}
  disableCloseOnSelect
  getOptionLabel={(option) => option.title}
  renderOption={(option, { selected }) => (
    <React.Fragment>
      <Checkbox
        icon={icon}
        checkedIcon={checkedIcon}
        style={{ marginRight: 8 }}
        checked={selected}
      />
      {option.title}
    </React.Fragment>
  )}

  style={{ width: "80%" }}
  renderInput={(params) => (
    <TextField {...params} 
    variant="outlined" 
    type="input"   -----> this !!!!!
    label="Recipients" 
    placeholder="Contacts" />
  )}
/>

For the KeyboardDatePicker object:

<MuiPickersUtilsProvider utils={DateFnsUtils}>
<Grid container justify="space-around">
    <KeyboardDatePicker
      margin="normal"
      id="date-picker-dialog"
      label="Date picker dialog"
      type="input" ------> this !!!!!!
      format="MM/dd/yyyy"
      value={this.state.selectedDate}
      onChange={this.handleDateChange}
      KeyboardButtonProps={{
        'aria-label': 'change date',
      }}
    minDateMessage='La fecha debe ser posterior'
    maxDateMessage='Fecha demasiado lejana'
    error={this.state.error}
    helperText={this.state.error ? this.errorText : null}
    minDate={this.state.minDate}
    />
</Grid>
</MuiPickersUtilsProvider>

React material-ui TextField, the input is white

1 Answers