I'm using react-data-table-component in my project to create a datatable.
However, the checkboxes are appearing too large.
After checking the docs, I found this page - Overidding Styling Using css-in-js with customStyles, and this example:
// Internally, customStyles will deep merges your customStyles with the default styling.
const customStyles = {
rows: {
style: {
minHeight: '72px', // override the row height
},
},
headCells: {
style: {
paddingLeft: '8px', // override the cell padding for head cells
paddingRight: '8px',
},
},
cells: {
style: {
paddingLeft: '8px', // override the cell padding for data cells
paddingRight: '8px',
},
},
};
There are no mentions on there about checkbox styling, so I attempt this:
const customStyles = {
checkbox: {
style: {
maxHeight: '18px',
maxWidth: '18px',
},
},
};
Unfortunately, the checkboxes remained large sized.
How do I solve this so it makes the checkboxes like the size shown in their example in the screenshots?
Screenshots.
Here is how I solved it:
Create a Checkbox component, like so:
const Checkbox = React.forwardRef(({ onClick, ...rest }, ref) =>
{
return(
<>
<div className="form-check pb-5" style={{ backgroundColor: '' }}>
<input
type="checkbox"
className="form-check-input"
style={{ height: '20px', width: '20px' }}
ref={ref}
onClick={ onClick }
{...rest}
/>
<label className="form-check-label" id="booty-check" />
</div>
</>
)
})
Add Checkbox component to DataTable, like so:
<DataTable
title="Products"
columns={columns}
data={ data }
subHeader
subHeaderComponent={subHeaderComponentMemo}
onRowClicked={ handleRowClicked }
selectableRows
selectableRowsComponent={Checkbox} // Pass the Checkbox component only
responsive
persistTableHead
/>
I am using Material-UI version 4 and not the latest mui v5.
I have tried the following to no avail. I just want to remove/hide the border around the textfield component.
<TextField
disabled={true}
variant="standard"
InputProps={{
style: { backgroundColor: '#d6eaf8', fontSize: '18px', color: 'black' },
underline: {
"&&&:before": {
borderBottom: "none"
},
"&&:after": {
borderBottom: "none"
}
}
}}
/>
If you only want to remove the material ui underline border you simply use the "disableUnderline: 'true'" property like this:
<TextField
disabled={true}
variant="standard"
InputProps={{
disableUnderline: 'true',
style: {
backgroundColor: "#d6eaf8",
fontSize: "18px",
color: "black"
}
}}
/>
If you want to have all the TextInputs look the same I would recommend setting up a custom Theme, though.
updated:
Another way of removing the border is to fiddle around with the CSS Global classes such as:
const StyledTextField = withStyles({
root: {
"& .MuiOutlinedInput-root": {
backgroundColor: "lightblue",
"& fieldset": {
border: "none"
}
}
}
})(TextField);
return <StyledTextField variant="outlined" />;
updated 2:
or if you rather use a custom theme:
const theme = createTheme({});
theme.overrides = {
MuiOutlinedInput: {
root: {
backgroundColor: 'lightblue',
},
notchedOutline: {
border: "none"
}
}
};
...
<ThemeProvider theme={theme}>
<TextField variant="outlined" />
</ThemeProvider>
const styles = makeStyles((theme) => ({
dropDownFormSize: { width: '60%' },
dropDownSelector: {
// fontFamily: 'Comfortaa',
fontSize: '15px',
},
optionDropdown: {
paddingLeft: '10px',
color: 'white',
},
option: {
color: 'white',
border: `1px solid ${theme.palette.primary.contrastText}`,
'&:focus': {
border: `1px solid ${theme.palette.secondary.contrastText} !important`,
},
},
optionItems: {
// work on the hover
backgroundColor: `${theme.palette.primary.light} !important`,
// this hover do not get triggered unless I trigger it from
//the dev tool
'&:hover': {
backgroundColor: ` ${theme.palette.secondary.contrastText} !important`,
},
},
}));
const dummyElement = () => {
const classes = styles();
const languageArray = ['English', 'Mexican', 'Italian', 'Persian'];
return (
<FormControl className={classes.dropDownFormSize}>
<NativeSelect
required
className={classes.dropDownSelector}
value={language}
name='language'
onChange={handleChangeLanguage}
classes={{
root: classes.optionDropdown,
select: classes.option,
}}
>
<option
value=''
disabled
className={classes.optionItems}
>
Select Option
</option>
{languageArray.map((language, i) => {
return (
<option
key={i}
className={classes.optionItems}
value={language}
>
{language}
</option>
);
})}
</NativeSelect>
</FormControl>
);
}
The problem is when I hover over the options in the native select, the hover of the option does not get triggered (If I trigger the :hover from the dev tools, then the styles are applied). When I hover over the items, there is some white background and I'm trying to override it but I can't find the style of it in the inspector.
Within a datacell, I wasn't able to find out how to stack text. So I created a textfield, gave it value and gave it helper text and disabled the textfield and changed the text color to black when disabled. I've been trying to figure out how to change the bottomBorder to 'none' (which is what I assume is what is being used to create the dashed line under the input value text).
This is what I have so far.
const DarkerDisabledTextField = withStyles({
root: {
marginRight: 8,
"& .MuiInputBase-root.Mui-disabled": {
color: 'black',
fontSize: '16px',
borderBottom: 'none',
}
},
underline: {
"& .MuiInputBase-root.MuiInput-outlined": {
borderBottom: 'none',
}
}
})(TextField);
This is what I used to create and style my textfield. The underline key isn't working how I have read that it should.
And this is what I have tried so far with my textfield
<DarkerDisabledTextField
title={params.data.name}
disabled
defaultValue={params.data.name}
helperText={title}
fullWidth
/>
I suggest prop solution.
<DarkerDisabledTextField
helperText="helper text"
disabled={isDisabled}
InputProps={isDisabled ? { disableUnderline: true } : {}}
/>
If you prefer withStyles way, check :before
const DarkerDisabledTextField = withStyles({
root: {
marginRight: 8,
"& .MuiInputBase-root.Mui-disabled:before": {
color: "black",
fontSize: "16px",
borderBottom: "none"
}
}
})(TextField);
Applied codesandbox
if someone uses the Mui v5 inputs with createTheme, here's what i added to components:
createTheme({
components: {
MuiInputBase: {
styleOverrides: {
root: {
'&.MuiInput-root.Mui-disabled': {
':before': {
borderBottomStyle: 'solid'
}
}
}
}
}
}
});
I'm trying to use a Material UI Select component on a dark background:
But I'm unable to change the color of the drop down icon and underline border to white. I've looked at overriding the styles using classes, and I'm able to change color with the following:
const styles = theme => {
root: {
borderBottom: '1px solid white',
},
icon: {
fill: 'white',
},
}
class MyComponent extends React.Component {
render() {
const {classes} = this.props;
return (
<Select
value={this.props.value}
inputProps={{
classes: {
root: classes.border,
icon: classes.icon,
},
}}
>
<MenuItem
value={this.props.value}
>
Foo
</MenuItem>
</Select>
)
}
}
However, I cannot seem to set the color of the underline while the Select component is in focus, i.e. with the above code, I get the white underline and icon, but while focus is on the component the underline stays black.
With some help from Jan-Philipp I got everything colored white, also while the component stays in focus:
const styles = theme => ({
select: {
'&:before': {
borderColor: color,
},
'&:after': {
borderColor: color,
}
},
icon: {
fill: color,
},
});
class MyComponent extends React.Component {
render() {
const {classes} = this.props;
return (
<Select
value="1"
className={{classes.select}}
inputProps={{
classes: {
icon: classes.icon,
},
}}
>
<MenuItem value="1"> Foo 1</MenuItem>
<MenuItem value="2"> Foo 2</MenuItem>
</Select>
)
}
}
Not a very pretty solution to getting the right contrast, but it does the job.
Edit
The above answer is missing some code, and is also missing the hover color, as suggested by #Sara Cheatham. See updated hooks based solution:
const useStyles = makeStyles({
select: {
'&:before': {
borderColor: 'white',
},
'&:after': {
borderColor: 'white',
},
'&:not(.Mui-disabled):hover::before': {
borderColor: 'white',
},
},
icon: {
fill: 'white',
},
root: {
color: 'white',
},
})
export const MyComponent = () => {
const classes = useStyles()
return (
<Select
className={classes.select}
inputProps={{
classes: {
icon: classes.icon,
root: classes.root,
},
}}
value='1'
>
<MenuItem value='1'> Foo 1</MenuItem>
<MenuItem value='2'> Foo 2</MenuItem>
</Select>
)
}
I don't know why setting the color of the border and icon got so complicated. In any case, the answer above didn't help me with setting the icon color. Eventually, I found the solution via this code:
text color: white
border: rgba(228, 219, 233, 0.25)
icon (arrow): white
<Select
// IconComponent={() => <ArrowDropDownIcon style={{marginRight:10,pointerEvents:'none'}}/>}
labelStyle={{ color: '#ff0000' }}
sx={{
color: "white",
'.MuiOutlinedInput-notchedOutline': {
borderColor: 'rgba(228, 219, 233, 0.25)',
},
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
borderColor: 'rgba(228, 219, 233, 0.25)',
},
'&:hover .MuiOutlinedInput-notchedOutline': {
borderColor: 'rgba(228, 219, 233, 0.25)',
},
'.MuiSvgIcon-root ': {
fill: "white !important",
}
}}
labelId="select-filter-by-field-labe;"
id="select-filter-by-field"
value={'some value'}
>
</Select>
You can change the bottom border color with the following code. Hope this helps you.
const styles = theme => ({
select: {
"&:before": {
borderColor: "red"
}
}
});
const MySelect = ({ classes }) => (
<Select value="1" className={classes.select}>
<MenuItem value="1">Option 1</MenuItem>
<MenuItem value="2">Option 2</MenuItem>
<MenuItem value="3">Option 3</MenuItem>
</Select>
);
Example in CodeSandbox
You can change the border color and SVG icon color of a MUI <Select> component using the following declaration:
<Select
sx={{
height: '2.5rem',
color: 'white',
'& .MuiOutlinedInput-notchedOutline': {
borderColor: 'white'
},
'& .MuiSvgIcon-root': {
color: 'white'
}
}}
>
You can access input (and the underline) like so:
<Select
autoWidth
classes={{
root: styles.root,
select: styles.select
}}
displayEmpty
input={
<Input
classes={{
underline: styles.underline
}}
/>
}
onChange={this.onChange}
value=""
>
select: {
'&:before': {
borderColor: 'var(--galaxy-blue)',
},
'&:hover:not(.Mui-disabled):before': {
borderColor: 'var(--galaxy-blue)',
}
},
<Select
className={classes.select}
value={selected}
onChange={this.handleChange}
>
This worked for me:
import {
FormControl,
InputLabel,
Select,
MenuItem,
OutlinedInput as MuiOutlinedInput,
} from "#material-ui/core";
const OutlinedInput = withStyles((theme) => ({
notchedOutline: {
borderColor: "white !important",
},
}))(MuiOutlinedInput);
const useStyles = makeStyles((theme) => ({
select: {
color: "white",
},
icon: { color: "white" },
label: { color: "white" },
}));
function Component() {
return (
<FormControl variant="outlined">
<InputLabel id="labelId" className={classes.label}>
Label
</InputLabel>
<Select
labelId="labelId"
classes={{
select: classes.select,
icon: classes.icon,
}}
input={<OutlinedInput label="Label" />}
>
<MenuItem>A</MenuItem>
<MenuItem>B</MenuItem>
</Select>
</FormControl>
);
}
This worked for me:
<Select
sx={{
"& .MuiSvgIcon-root": {
color: "white"
}
}}
>
I faced the same problem and I fixed it this:
I added the .css file into react file:
import './index.css';
<Select
labelId="demo-simple-select-standard-label"
id="demo-simple-select-standard"
value={selectedRegion}
onChange={handleChangeSelectOption}
label="region"
className="select-options-navbar-main-color"
>
{regionList.map((item)=>{
return <MenuItem key={item} value={item}>{item}</MenuItem>
})}
</Select>
and at the end the most important file .css file:
:root{
--select-options-navbar-main-color: white;
}
.select-options-navbar-main-color div{
color: var(--select-options-navbar-main-color) !important;
}
.select-options-navbar-main-color::before {
border-color: var(--select-options-navbar-main-color) !important;
}
.select-options-navbar-main-color::after {
border-color: var(--select-options-navbar-main-color) !important;
}
.select-options-navbar-main-color:not(.Mui-disabled):hover::before {
border-color: var(--select-options-navbar-main-color) !important;
}
.select-options-navbar-main-color svg{
fill: var(--select-options-navbar-main-color) !important;
}
There is a root class available in MUI documentation, we can easily override that, for arrow and border outline
<Select variant='outlined' sx={{'.MuiSelect-icon': {
color: 'white'
},
".MuiSelect-outlined":{
color: 'white'
}}}>