Tengo un dialog que contiene componentes de Form
.
Estos son los estilos definidos:
const myStyle = makeStyles(theme => ({
confclass: {
background: '#8bc34a',
borderRadius: 7,
border: 0,
color: 'white',
padding: '0 30px',
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
textTransform: 'capitalize',
margin: theme.spacing(3)
},
delclass: {
background: '#c62828',
borderRadius: 7,
border: 0,
color: 'white',
padding: '0 30px',
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
textTransform: 'capitalize',
margin: theme.spacing(3)
},
formControl: {
marginLeft: theme.spacing(2),
marginBottom: theme.spacing(2)
},
selectEmpty: {
marginTop: theme.spacing(2)
},
dialogContent: {
minHeight: 135,
marginBottom: 25,
overflow: 'hidden'
},
inputLabelAnsMsg: {
marginBottom: 30,
minHeight: 65,
overflow: 'hidden'
},
divTextFields: {
marginLeft: 20
}
}));
Este es el código del componente Dialog:
const DialogQuestion = props => {
const classes = myStyle();
return (
<Dialog
open={props.open}
onClose={props.closeHandler}
onExit={onExitDialogHandler}
aria-labelledby='form-dialog-title'
PaperProps={{
style: {
width: '75%',
maxHeight: '80%',
backgroundColor: '#e0e0e0'
}
}}
>
<DialogTitle id='form-dialog-title'>Nueva pregunta</DialogTitle>
<DialogContent dividers className={classes.dialogContent}>
<DialogContentText>
Para crear una nueva pregunta es necesario completar los siguientes
campos. Puedes cancelar esta acción con el botón Cancelar en la parte
inferior o dando click por fuera de este cuadro.
</DialogContentText>
<TextField
autoFocus
id='question'
label='Pregunta'
onChange={textFieldQuestionHandler}
type='text'
fullWidth
required
variant='outlined'
defaultValue={questionDetails.question}
error={errorTextField}
InputProps={{
startAdornment: (
<InputAdornment position='start'>
<HelpIcon />
</InputAdornment>
)
}}
/>
<input type='file' onChange={handleUploaded} />
</DialogContent>
{files.length > 0 && (
<Carousel arrows>
{files &&
files.map(element => {
return <img src={element} />;
})}
</Carousel>
)}
<div className={classes.formControl}>
<TextField
select
fullWidth
label='Grupo'
variant='outlined'
value={questionDetails.category || group[0].value}
onChange={event => selectChangeHandler(event, 'category')}
style={{ marginBottom: 15 }}
>
{categoryList}
</TextField>
<TextField
select
fullWidth
label='Complejidad'
variant='outlined'
value={questionDetails.level || complexity[0].value}
onChange={event => selectChangeHandler(event, 'level')}
>
{levelList}
</TextField>
</div>
{answerListForm}
<FormControl component='fieldset' className={classes.formControl}>
<FormLabel component='legend'>Tipo de pregunta</FormLabel>
<RadioGroup
aria-label='questionType'
name='questionType1'
value={questionType}
onChange={handleChangeQuestionType}
>
<FormControlLabel
value={QUESTION_TYPES.OPEN}
control={<Radio />}
label='Abierta'
/>
<FormControlLabel
value={QUESTION_TYPES.MULTIPLE}
control={<Radio />}
label='Múltiple'
/>
<FormControlLabel
value={QUESTION_TYPES.BINARY}
control={<Radio />}
label='Binaria (T o F)'
/>
</RadioGroup>
</FormControl>
<DialogActions>
<Button
className={classes.delclass}
onClick={cancelDialogHandler}
color='primary'
key='cancelButtonNewQuestion'
>
Cancelar
</Button>
<Button
className={classes.confclass}
color='primary'
key='successButtonNewQuestion'
onClick={
dialogAction === 0 ? addQuestionHandler : editQuestionHandler
}
disabled={errorChecks || errorOptions || errorTextField}
>
{props.dialogAction === 0 ? 'Crear' : 'Guardar cambios'}
</Button>
</DialogActions>
</Dialog>
);
}
Y esto es lo que aparece:
Debajo del campo de pregunta debería aparecer bien un "Seleccionar archivo" o algo como eso. El botón que se alcanza a ver sí sirve. Y más abajo del botón de "Seleccionar archivo" debería estar un grupo de radios que ni siquiera aparece.
const classes = myStyle();