When using a Textfield as the first child of DialogContent:
export default function App() {
return (
<Dialog open={true}>
<DialogTitle>Hey</DialogTitle>
<DialogContent>
<TextField
fullWidth
id='name'
label={'Foo'}
name='name'
required
type='text'
value={'Bar'}
/>
</DialogContent>
</Dialog>
);
}
its label (when using `variant="outlined") gets clipped. See codebox sample. Any way to fix this problem? e.g. by customizing the theme?
You can easily fix that issue by adding some margin to the TextField like the following.
sx={{ marginTop: 2 }}
Or you could wrap the TextField using Box inside the DialogContent like the following.
<Box p={1}>
<TextField
...
/>
</Box>
Related
Given the following code:
const DatePeacker = () =>{
return (
<LocalizationProvider dateAdapter={AdapterMoment}>
<Stack spacing={3}>
<DesktopDatePicker
label="Día de publicación"
inputFormat="DD/MM/yyyy"
value={fechavalor}
onChange={handleDatepicker}
renderInput={(params) => <TextField required size="small" color="primary" style = {{width: 300}} {...params} inputProps={{ ...params.inputProps, placeholder: "dd/mm/aaaa" }} />}
/>
</Stack>
</LocalizationProvider>
)}
The following behaviour on the DatePicker label occurs on clicking outside it or in different elements,either click an option of a select or writing in the textfield (which has a function to capitalize new words. It does not happen when clicking outside the component. May it be cause by reloading the value of the datepicker for some reason?
I leave here the handleDatePicker function:
const handleDatepicker = (newvalue)=>{setFechavalor(newvalue);}
I would like to override the Datagrid's NoRowsOverlay component with my custom one, which uses react-dropzone:
<GridOverlay
{...getRootProps()}
className={clsx(classes.zone, {
[classes.valid]: isDragAccept,
[classes.invalid]: isDragReject
})}
>
<input {...getInputProps()} />
{isDragActive
? (
<Typography variant='h6'>
{isDragAccept ? 'Drop the file here.' : 'Invalid file type.'}
</Typography>
)
: (
<Typography variant='h6'>
Drop CSV file here or click to upload.
</Typography>
)}
</GridOverlay>
I'm overriding the component like so:
<DataGrid
autoHeight
columns={getColumns(classes)}
components={{
NoRowsOverlay: DropZone
}}
disableColumnMenu
disableSelectionOnClick
hideFooter
rows={devices}
/>
I cannot figure out why drag&drop and also clicking on dropzone does not work anymore.
Replacing GridOverlay with regular div also does not work. Dropzone component works as long as rendered outside the DataGrid. Any ideas?
I had a similar problem recently where I placed a button in my custom overlay, but it was unclickable.
The cause of the problem for me was that the DataGrid was inside a modal, causing the button to be unclickable whenever the overlay was active. However, I fixed the issue by giving my overlay component a higher z-index.
<GridOverlay {...getRootProps()}
style={{ zIndex: 5}}
//Or add it to your classes.zone styles
className={clsx(classes.zone, {
[classes.valid]: isDragAccept,
[classes.invalid]: isDragReject
})}
>
<input {...getInputProps()} />
{isDragActive
? (
<Typography variant='h6'>
{isDragAccept ? 'Drop the file here.' : 'Invalid file type.'}
</Typography>
)
: (
<Typography variant='h6'>
Drop CSV file here or click to upload.
</Typography>
)}
</GridOverlay>
I can't find a way to create a group of three small (19px high) labelled radio buttons in material-ui. I'm migrating a browser app from static HTML/JS into material-ui/react, and I need the group to stay the same size.
The button group I'm starting with has three small vertically aligned labelled radio buttons. Here's
a screenshot:
Here's the code for the best I've been able to do using the material-ui documentation:
<FormControl
margin="dense"
size="small"
>
<RadioGroup
size="small"
name="dataSource"
value={dataSource}
onChange={handleDataSourceChange}
>
<FormControlLabel
value="CaseCount"
control={
<Radio
className={classes.radio}
size="small"
/>
}
label="Cases"
/>
<FormControlLabel
value="DeathCount"
control={
<Radio
className={classes.radio}
size="small"
/>
}
label="Deaths"
/>
<FormControlLabel
value="HotSpots"
control={
<Radio
size="small"
/>
}
label="HotSpot warning"
/>
</RadioGroup>
</FormControl>
This results in an oversized group -- the button icons are too large, the text is too large, and each row is 38 pixels high (twice the 19 pixels of the original). Here's a screenshot of the material-ui counterpart:
I think I want the result to use a vanilla html input (with type of radio) instead of an svg icon, and a font with font-height of 13px. How do I do that in material-ui?
I know how to fix the padding-left so I'm not worried about that. How do I get rows that are 19px high instead of 38px?
Reason
If you inspect the Material radio button, we can see that the padding of the radio button is causing each row to have a height of 38px.
Code
Therefore, we can simply remove the vertical padding from all radio buttons with the following code (note that my code is slightly different than yours):
const useStyles = makeStyles({
// Applied to <Radio />
root: {
width: 19,
height: 19,
paddingTop: 0,
paddingBottom: 0,
},
// Applied to <FormControlLabel />
label: {
fontSize: 13
}
});
export default function RadioButtonsGroup() {
const [value, setValue] = React.useState("CaseCount");
const classes = useStyles();
const handleChange = (event) => {
setValue(event.target.value);
};
const customRadio = <Radio size="small" classes={{root: classes.root}} />;
return (
<FormControl component="fieldset">
<RadioGroup value={value} onChange={handleChange}>
<FormControlLabel classes={{label: classes.label}} control={customRadio} value="CaseCount" label="Cases" />
<FormControlLabel classes={{label: classes.label}} control={customRadio} value="DeathCount" label="Deaths" />
<FormControlLabel
classes={{label: classes.label}}
control={customRadio}
value="HotSpots"
label="Hotspot Warning"
/>
</RadioGroup>
</FormControl>
);
}
Explanation
According to the Radio API documentation, we can apply custom styling to root of the radio button by overriding styles with classes using the class name of root. Therefore, we first define a style object called root in the makeStyles() function. Next, we apply the styling to the Radio component by adding the prop of classes={{root: classes.root}}:
<Radio size="small" classes={{root: classes.root}} />
Similarly, according to the FormControlLabel API documentation, we can apply custom styling to the text label using the label class name. Therefore, we first define a style object of label in the makeStyles() function. Next, we apply the styling to the FormControlLabel component by adding the prop of classes={{label: classes.label}}:
<FormControlLabel classes={{label: classes.label}} /* ... */ />
I'm trying to test a component that has an endAdornment IconButton and other with a TreeView, but neither the IconButton and the ExpandIcon/CollapseIcon have good options to dispatch test events.
This is the TextField component that I'm using:
<TextField
fullWidth
label="Label"
onChange={handleChange}
type="text"
InputProps={{
endAdornment: (
<InputAdornment >
<IconButton onClick={openAssetHierarchy}>
<Folder />
</IconButton>
</InputAdornment>
),
}}
/>
This is the TreeView component:
<TreeView
defaultCollapseIcon={<ArrowDropDown />}
defaultExpandIcon={<ArrowRight />}
defaultEndIcon={<div style={{ width: 24 }} />}
onNodeToggle={handleToggle}
onNodeSelect={handleSelect}
>
[...]
</TreeView>
For the TextField icon button:
For TreeView when using Testing Playground to get the icon
There aren't good queries to get the icons for tests. How can I get these options?
For the IconButton you can add an aria-label attribute to the element, then use getByLabelText to access it in your test. This is also useful and recommended for accessibility purposes.
<IconButton aria-label="add a file" onClick={openAssetHierarchy}>
<Folder />
</IconButton>
screen.getByLabelText('add a file') // Gets you the `IconButton`
For the TreeView items, I assume you don't actually need to access the icon specifically but simply need to access the TreeItem for testing purposes. This can be done with getByRole and passing the tree item's name.
screen.getByRole('treeitem', { name: /Test1/ }) // Gets you the first `TreeItem`
I am using #material-ui/core: "4.0.1"
Using a TextField component and trying to change the cursor to 'not-allowed'.
Simple code as below
<TextField style={{cursor:'not-allowed'}}
id="standard-name"
label="Name"
margin="normal"
disabled={true}
/>
But since the TextField it self have other component inside, disabled cursor icon only appear in top part of the ui (not on top of actual text area) as below
Can see two divs and one input control under TextField
Tried using glamor to overwrite the class as below but no luck
const styles = glamor.css({
cursor:'not-allowed'
})
function MyStyledDiv({ ...rest}) {
return (
<div
className={`${styles} ${'MuiInputBase-input'}`}
{...rest}
/>
)
}
function App() {
return (
<div className="App">
<p>Testing</p>
<MyStyledDiv>
<TextField style={{cursor:'not-allowed'}}
id="standard-name"
label="Name"
margin="normal"
disabled={true}
/>
</MyStyledDiv>
</div>
);
}
Is there anyway I can achieve this
Try adding the styling to the inputProps prop:
<TextField
id="standard-name"
label="Name"
margin="normal"
disabled={true}
inputProps={{style: {cursor:'not-allowed'}}}
/>