Estoy representando <TextField> dos veces usando mi componente DatePicker.js definido. Entonces, siempre que el usuario haga clic en <CalendarIcon> que está dentro de <TextField> , se abrirá un pequeño calendario. Quiero diseñar la etiqueta en <TextField> de una manera específica. Actualmente, así es como se ve.

Puede ver que la etiqueta 'Para' del segundo <TextField> está visible. Debe venir detrás del calendario y no debe aparecer.

 class DatePickerInput extends React.Component { render() { const { classes, label, selectedDate } = this.props; return (<TextField fullWidth variant="filled" label={label} onClick={this.props.onClick} value={selectedDate.format("MM-DD-YYYY")} InputLabelProps={{ shrink: true }} InputProps={{ className: classes.input, endAdornment: (<CalendarIcon color="primary" />) }} />) } } class DatePicker extends React.Component { render() { const { label, value, minDate, maxDate, onChange } = this.props; return ( <ReactDatePicker selected={value.toDate()} minDate={minDate.toDate()} maxDate={maxDate.toDate()} customInput={<DatePickerInputComp selectedDate={value} label={label} />} onChange={onChange} /> ) } }

El problema:
¿Cómo hago para que la etiqueta 'Para' no aparezca cuando aparece <CalendarIcon> ? Quiero diseñar la 'etiqueta' de apoyo de TextField pero no estoy seguro de cómo puedo hacerlo.

El código actualizado:

 const inputStyles = theme => ({ icon: { zIndex: 1029, }, }); class DatePicker extends React.Component { render() { const { label, value, minDate, maxDate, onChange, } = this.props; const { classes } = this.props; return ( <ReactDatePicker selected={value.toDate()} minDate={minDate.toDate()} maxDate={maxDate.toDate()} customInput={<DatePickerInputComp selectedDate={value} label={label} />} wrapperClassName={classes.icon} onChange={onChange} /> ) } }