How do I go about styling the transparent dark overlay of a material-ui dialog or modal?
I'm using material-ui/React/Typescript.
Instead of a transparent dark, I want it to be a transparent white.
I'd prefer a JSS solution but an inline style is welcomed.
You can use the BackdropProps property of the modal:
<Modal
aria-labelledby="simple-modal-title"
aria-describedby="simple-modal-description"
open={this.state.open}
onClose={this.handleClose}
BackdropProps= {{
classes: {
root: classes.backDrop
}
}}
>
and in your style object:
...
backDrop: {
background: 'rgba(255,255,255,0.2)',
},
The API for this has changed a bit in the last couple of years. BackdropProps is now referenced by slotProps.backdrop. Meaning the component now takes a slotProps prop, that receives an object, one of the properties being backdrop all lowercase. backdrop takes an object that can include many things, including a style prop that you use like usual.
<Modal
slotProps={{ backdrop: { style: { backgroundColor: 'rgba(255,255,255,0.2)' } } }}
>
</Modal>
Related
I am learning Material UI ( ver.5.10.10 ) for the first time. I want to customize the TextField of material UI. As I do not like the transition from focus off to focus on I would like the TextField styling to always show as if it were in focus (I don't want it to be in focus, just the same style as if it were).
I'm searching in documentation & google in general but I have no clue how I can achiev this.
Images explaining:
(1) This is the default style of the TextField, without focus
(2) This is the default style of the TextField when in focus
I would like it to always look like in (2) , no matter if it's in focus or not
I tried to find a property that allows changing this behavior but I didn't find anything, I guess it could be done with a customTheme? Or maybe there is a simpler way
Thanks!
Please check below code for your requirement. You can always check the API page of the component. on API page bottomside there are CSS selectors. you can use them to customize the css of the compoent.
e.g.
1)https://mui.com/material-ui/api/text-field/#css
2) https://mui.com/material-ui/api/outlined-input/#css
<TextField
label="Outlined"
variant="outlined"
InputLabelProps={{ shrink: true }}
sx={{
"& .MuiOutlinedInput-root": {
"& fieldset": {
borderColor: "primary.main",
borderWidth: "2px"
}
},
"& .MuiFormLabel-root": {
color: "primary.main"
},
}}
/>
You should try using onFocus and onBlur react's events on the input itself.
function Input() {
return (
<input
id="someId"
type="text"
name="inputName"
onFocus={(e) => handleOnFocusEvent(e)}
onBlur={(e) => handleOnBlurEvent(e)}
placeholder="Outlined"
style={{
position: "relative",
zIndex: 1,
}}
/>
)
}
for example if you have an input element like the above, you can try to modify the placeholder style on onFocus event and then resetting the style when the onBlur event occurs (onBlur event occurs when the element is not in focus). You can access the placeholder styles like this:
"&::placeholder": {
position: "absolute",
top: 0,
}
if your input has position: relative; zIndex: 1; try on onFocus event to set the placeholder styles to position: absolute, top: 0, left: 0, you can try using GSAP library to make a cool animation or just set a transition css property on the input itself.
Is there a props in material-table to change the row color while hovering?
Something like this example.
Thank you
According to the styling section in the documentation, you can pass a rowStyle props, like this :
options={{
rowStyle: {
backgroundColor: '#EEE',
}
}}
You can also use the onHover's React hook on your table component and apply your hover's style there.
According to my research I can change the style of ANT components using the "style" prop (Even though that's not exactly in the docs of the Spin component)
Here's my attempt:
<Col>
{userCompaniesLoading ? (
<Spin style={{ color: 'white' }} />
) : (
<UserOutlined
onClick={() => {
setDrawerVisibility(!isDrawerVisible);
}}
/>
)}
</Col>
On inspect, each dot of the Spin is a "<i class="ant-spin-dot-item"></i>", and the color property does not work. So, how can I change the color of the Spin component?
You can set the Spin Component Color by adapting the background-color of the ant-spin-dot-item in your component css file.
.ant-spin-dot-item {
background-color: red;
}
Here is a CodeSandBox demo with a changed index.css.
Btw. a more robust and production ready way to adapt antd style is to create a custom theme.
Using a customized Webpack config works good in my project.
Also if you want to change the color of the tip you need to change this class:
.ant-spin-text {
color: #999; }
Looks like before tip class was .ant-spin-tip, but that didn't work for me.
Just sharing this in case it helps someone :D
I've successfully implemented the Semantic UI React Dropdown like this:
<div>
<Form.Label>Search and Select Company</Form.Label>
<Dropdown
name='company'
data-testid='companiesDropdown'
placeholder='Ex. Goodyear'
className={classes.errorState}
fluid
search
searchInput={{autoFocus: true}}
selection
options={companies
? companies.map((company, key) => {
return (
{key: key, value: company.company_id, text: company.company_name}
)})
: null}
value={(companyId > 0) ? companyId: null}
onChange={handleDropdownChange}
/>
{determineErrorMessage('companyId')}
</div>
Now I'd like to change the border color if the element is in an error state such as the user hasn't picked an item yet. To do this with any other HTML element, I can just set the className but it doesn't seem to work with this element.
In the example above, I'm just hardcoding the className={classes.errorState} where errorState: { borderColor: 'red' } but doing so doesn't work.
Any ideas on how to get this working properly?
P.S. As a temporary fix I added a <div> wrapper around it which kind of works except you can clearly see the border of the <div> and the border of the <Dropdown> element.
HI i reworked the semantic example for you
As it's a div and not a true HTML list try it like this
CSS
.dropdownRed {
border: 1px solid red !important;
}
JSX
<Dropdown.Menu className={errClass}>
Link to working codesandbox demo
Is there any way to override a Material UI components styling without having to create a whole new component using withStyles()?
For instance, say I am rendering the following and I just want to change the color of the "Delete" label:
<div style={styles.rowFooter}>
<FormControlLabel
control={<ClearIcon />}
label="Clear"
title="Clear all fields."
onClick={clearFields}
/>
<FormControlLabel
control={<DeleteIcon />}
label="Delete"
title="Delete this row."
onClick={deleteRow}
/>
</div>
To do this, I'd usually have to:
Create a new styles function that returns { color: "maroon" }.
Create a new component to render the "Delete" button.
Wrap my new component withStyles(newStylesFn)(MyComponent).
But I don't want to do all of that. Is there any way to avoid it?
Update:
One way that I know of is to just pass a CSS className. I was looking for something besides that because it doesn't even work in this situation to override the nested element.
What I'd really like to be able to do is just pass style={{ color: "maroon" }}, but that only changes the color of the icon, not the actual label text...
You could use the classes prop to override styles provided by Material UI instead of className.
<FormControlLabel
control={<DeleteIcon />}
label="Delete"
title="Delete this row."
classes={{
label: 'labelStyle'
}}
/>
styles.css
.labelStyle {
color: maroon !important;
}
Although it's Not the perfect solution, it still does the job without using withStyles().