I want to override the css of MuiButton but only if it's a descendant of MuiDialog.
In css you could do this with:
.MuiDialog-root .MuiButton-root {
border: 5px solid blue;
}
But I can't figure out how to do it in the theme overrides:
theme.overrides = {
MuiDialog: {
root: {
border: "7px solid red",
"& .MuiButton": { border: "5px solid blue" }
}
}
};
This didn't apply the style to the button.
Is it possible to override the style of a MUI button only if it's a descendant of some specified Mui component?
CodeSandbox
The classname in the theme overrides should be & .MuiButton-root
I was able to change the background of button within the dialog. Maybe you didn't use the right className:codesandbox.
MuiDialog: {
root: {
border: "7px solid red",
"& button": { backgroundColor: "blue" } // <- how to target MUIButton when descendent of MUIDialog?
}
}
Related
How can I change the background color, font color, and border color of this material-ui autocomplete textfield (combobox)? I would like to use css. this is what I have tried so far.
<Autocomplete
disablePortal
id="combo-box-demo"
options={clients}
className="test"
renderInput={(params) => <TextField {...params} label="Movie" />}
/>
css class
.test {
.MuiAutocomplete-listbox {
color: red;
}
}
Since you would like to use css, you can change colors like this:
.test fieldset {
border-color: red;
}
.test .MuiInputBase-root:hover fieldset {
border-color: blue;
}
.test input {
color: red;
}
.test label {
color: red;
}
.test {
background-color: yellow;
}
You can take a look at this sandbox for a live working example.
I need to apply a custom style to the disabled the antd range picker.
I have added className to the component but the style isn't changing.
<RangePicker
className="my-range"
allowClear={false}
bordered={true}
format="HH:mm"
style={{ width: "100%" }}
/>
Styles Css: (need to change color of the text in the box)
.ant-picker-disabled.building-ophrs-range {
background-color: #ffffff;
.ant-picker-input.ant-picker-input-active {
color: #224cc0;
}
}
Codesandbox : https://codesandbox.io/s/basic-antd-4-20-7-forked-g5ee2t?file=/demo.js
try to write
.ant-picker-disabled.my-range {
background-color: #008000 !important;
}
Try this:
.ant-picker.my-range.ant-picker-disabled {
background-color: #008000;
}
I am trying to change the border color on focus on a textarea component in MUI. I am using styled components:
import "./styles.css";
import { styled } from "#mui/material/styles";
const TextAreaStyle = styled("textarea")(({ theme }) => ({
border: `2px solid #F9FAFB`,
width: "100%",
flexGrow: 1,
boxSizing: "border-box",
borderRadius: 3,
backgroundColor: "#f8f8f8",
// font-size: 16px;
resize: "none",
"&:focus": {
border: `2px solid #454F5B`
},
"&:hover": {
border: `2px solid #F4F6F8`
}
}));
export default function App() {
return (
<div className="App">
<TextAreaStyle />
</div>
);
}
Sandbox: https://codesandbox.io/s/youthful-sammet-qhsfqf?file=/src/App.js
However, while the hover works, the focus does not work. The border color still looks like the default color. Can someone point me in the right direction?
Your code is working, is just that the color you have is too light and similar to the default color. Check it out:
https://codesandbox.io/s/cranky-leakey-mtfutl
EDIT: Updated the sandbox to remove the outline from Chrome
To remove that outline that some browsers have you just have to do
outline: "none"
SECOND EDIT:
for showing the focus border while on hover, just change the order of the styles, with focus last:
"&:hover": {
border: `2px solid #FF0000`
},
"&:focus": {
border: `2px solid #0FF00F`,
outline: "none"
}
I updated the sandbox to reflect that
I have a div component:
const Parent = styled.div`
&:not(${Input}:focus):hover {
border-color: blue;
}
`;
and child which is input
const Input = styled.input``;
As you can see, I dont want to change border-color on Parent, if Input is focused. However atm the :hover doesnt work at all. Looking for help, thanks!
You can leverage :focus-within to do that.
div {
padding: 1em;
margin: 2em;
display: inline-block;
border-width: 3px;
border-style: solid;
}
div:hover {
border-color: red;
}
div,
div:focus-within,
div:focus-within:hover {
border: 3px solid blue;
}
<div>
<input type="text">
</div>
I don't know how you can handle it with only selector css, but you can trick it with javascript.
Your styled-component :
const Input = styled.input``
const Parent = styled.div`
border: 1px solid blue;
:hover {
border-color: ${p => p.inputFocus ? "blue" : "yellow"};
}
`
and in your render you can handle a state focus of you input.
render :
state = {
inputFocus: false
}
setFocus = () => this.setState({inputFocus: true})
unsetFocus = () => this.setState({inputFocus: false})
render() {
const { inputFocus } = this.state
return (
<Container inputFocus={inputFocus}>
<Input
onBlur={this.unsetFocus}
onFocus={this.setFocus}
/>
</Container>
)
}
I want to change the default border color of an outlined textfield from gray to a darker blue.
<TextField
variant={"outlined"}
placeholder={t('landing_page.code.placeholder')}
onChange={this.onCodeChanged}
value={code}
fullWidth={true}
className={classes.codeInput}
error={code ? code.length < 10 : false}
/>
This is the codeInputclass:
codeInput: {
marginTop: theme.spacing.unit,
},
I have tried overriding the color via theme, but it does not work:
overrides: {
MuiOutlinedInput: {
root: {
borderColor: "#2b303e"
},
notchedOutline: {
borderRadius: "0",
borderWidth: "2px",
borderColor: "#2b303e"
},
},
}
It is still gray as you can see in the image.
I have identified the following css rules as the problem. With disabling this, everything looks fine. I just don't know how to do this
.MuiOutlinedInput-root-148 .MuiOutlinedInput-notchedOutline-155 {
border-color: rgba(0, 0, 0, 0.23);
}
Create a new css class for example:
// app.css
.blueBorder {
}
Add in the border you want and add !important; to overwrite.
// app.css
.blueBorder{
border-radius: 0px!important;
border: 2px solid #2b303e!important;
}
Assign it to your component:
// js / react component
<TextField
variant={"outlined"}
placeholder={t('landing_page.code.placeholder')}
onChange={this.onCodeChanged}
value={code}
fullWidth={true}
className={`blueBorder ${classes.codeInput}`}
/>
Update to show error class
// app.css
.blueBorder{
border-radius: 0px!important;
border: 2px solid #2b303e!important;
}
// Red border to denote error
.blueBorder-error {
border-radius: 0px!important;
border: 2px solid red!important;
}
Use the error class in the components className
condition ? true : false
// js / component
<TextField
variant={"outlined"}
placeholder={t('landing_page.code.placeholder')}
onChange={this.onCodeChanged}
value={code}
fullWidth={true}
className={code.length < 10 ? `blueBorder-error ${classes.codeInput}` : `blueBorder ${classes.codeInput}}
/>