I have an element like this:
<div
className={className.wrapper}
style={
wrapper
? { transform: "translateX(0)" }
: { transform: "translateX(50em)" }
}
></div>
I want to add this condition to my style prop too. I need both. EndOfTreatment ? {borderRight: "10px solid green" } : { borderRight: "10px solid red" }
how can I have both in style section?
I tried another approach. like creating classes for them but I have totally different conditions and I don't know what to do.
You can try it like this:
style={{
transform: wrapper
? 'translateX(0)'
: 'translateX(50em)',
borderRight: EndOfTreatment
? '10px solid green'
: '10px solid red',
}}
Related
I need to give a custom scroll style in Autocomplete Listbox.
I tried and research it and none of them worked.
My last codes
<Autocomplete
fullWidth
popupIcon={<KeyboardArrowDownIcon />}
id="combo-box-demo"
options={allTableData}
noOptionsText={"Məhsul tapılmadı"}
getOptionLabel={(option) => option.name ?? option}
ListboxProps={{
style: {
maxHeight: "200px",
"&::-webkit-scrollbar": {
width: "20px",
},
},
}}
Yes, you can pass a custom className to ListboxProps of Autocomplete component like this:
ListboxProps={{
className: "myCustomList"
}}
And then add scrollbar-related CSS to this class like this:
.myCustomList::-webkit-scrollbar {
width: 12px;
background-color: #5f6f9c;
}
.myCustomList::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #d62929;
}
You can take a look at this sandbox for a live working example of this solution.
How to apply multiple className in Next js, in which there are variable classsnames as well ?
I'm using component level css approach
Here's my code and what I want to do:
import styles from "./ColorGroup.module.css";
const colors = ["red", "sky", "yellow", "green", "golden"];
const ColorGroup = () => {
return (
<div className={styles.colorContainer}>
<text>Colour</text>
<div className={styles.colorBoxContainer}>
{colors.map((color, index) => (
<div
// variable color class is not get applied, only colorBox is applied, I want both
className={`${styles}.${color} ${styles.colorBox}`}
key={index}
></div>
))}
</div>
</div>
);
};
Goal:
CSS code:
/* code for layout and arrangement above */
.colorBox {
height: 36px;
width: 36px;
}
.red {
background-color: lightcoral;
}
.sky {
background-color: skyblue;
}
.yellow {
background-color: lightyellow;
}
.green {
background-color: lightgreen;
}
.golden {
background-color: greenyellow;
}
But this method is only applying the colorBox className and not doing anything for ${styles}.${color} . How to apply both ?
You should use bracket
<div className={styles.colorBoxContainer}>
{colors.map((color, index) => (
<div
className={`${styles[color]} ${styles.colorBox}`}
key={index}
></div>
))}
</div>
You can try to use the style object, it easier to use it with variables :
<div key={index} className={`${styles.colorBox}`} style={{ backgroundColor: color }} >
</div>
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?
}
}
I am conditionally styling my <input/> (standard HTML) component. I am passing inline JSX style as a style prop:
render() {
return (
<>
<input
type="text"
style={{
width: "100%",
paddingLeft: "8px",
paddingTop: "6px",
paddingBottom: "6px",
border: this.state.error
? "2px solid red"
: this.state.value
? "2px solid #2684ff"
: "2px solid hsl(0, 0%, 80%)",
outline: "0px",
"&:hover": {
border: "2px solid green"
}
}}
placeholder={this.props.placeholder}
onChange={this.handleInput}
onFocus={this.checkErrors}
value={this.state.value}
onBlur={this.sendData}
/>
{this.state.error ? (
<div className="errorMsg"> {this.props.errorMsg} </div>
) : null}
</>
);
}
My conditional styles work, and <input/> border colour changes based on this.state.error and this.state.value, however I can't get '&:hover' style to work. I have checked my .css and there is nothing overriding the style passed as props.
I have tried another approach, where I conditionally set className for my <input/> and define style in external .css file. It works and I can change border colour with:
input[type="text"]:hover {
border: 2px solid pink;
}
However, I would like to make this work in inline JSX. Why does my style for '&:hover': { ... } not work?
The "&" operator mean the current selector in preprocessing language like sass:
input {
&:hover {
background: red;
}
}
Will compile to:
input:hover {
background: red;
}
But you will have to use sass or styled component to use that sync tax.
Pseudo css selectors don't work in inline style.btw I would not recommend any of the js solution in the comments above .you need a more a robust css solution to handle all kind of pseudo selectors.
Your options are:
Use css in js solution like styled-components.https://styled-components.com/
Use regular css or scss and condionaly switch classNames.You
can utilize classnames library for easier experience.https://www.npmjs.com/package/classnames
Render style tag above your input and put your input styles there.quite bad practice and ugly.
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}}
/>