material ui border color overwriting the texbox
up vote
0
down vote
favorite
- when I intially load the page the border color of the text box should be red in color.
- but the problem is its showing grey color.
- so I gave border color: red to all the classes.
- but still it doesnt change.
not sure how to target this tag.
i achieved by giving important. is it possible to achieve without giving important
can you guys let me know so that in future I will fix it myself.
- providing my code snippet and sandbox below.
https://codesandbox.io/s/m58841kkwp
cssLabel: {
"&$cssFocused": {
color: { borderColor: "red" }
}
},
cssFocused: { borderColor: "red" },
cssUnderline: {
"&:after": {
borderBottomColor: "red"
}
},
cssOutlinedInput: {
"&$cssFocused $notchedOutline": {
borderColor: "green"
}
},
notchedOutline: { borderColor: "red !important" },
<div className={classes.container}>
<TextField
className={classes.margin}
InputLabelProps={{
classes: {
root: classes.cssLabel,
focused: classes.cssFocused
}
}}
InputProps={{
classes: {
root: classes.cssOutlinedInput,
focused: classes.cssFocused,
notchedOutline: classes.notchedOutline
}
}}
label="Custom CSS border"
variant="outlined"
id="custom-css-outlined-input"
/>
</div>
javascript html css reactjs material-ui
add a comment |
up vote
0
down vote
favorite
- when I intially load the page the border color of the text box should be red in color.
- but the problem is its showing grey color.
- so I gave border color: red to all the classes.
- but still it doesnt change.
not sure how to target this tag.
i achieved by giving important. is it possible to achieve without giving important
can you guys let me know so that in future I will fix it myself.
- providing my code snippet and sandbox below.
https://codesandbox.io/s/m58841kkwp
cssLabel: {
"&$cssFocused": {
color: { borderColor: "red" }
}
},
cssFocused: { borderColor: "red" },
cssUnderline: {
"&:after": {
borderBottomColor: "red"
}
},
cssOutlinedInput: {
"&$cssFocused $notchedOutline": {
borderColor: "green"
}
},
notchedOutline: { borderColor: "red !important" },
<div className={classes.container}>
<TextField
className={classes.margin}
InputLabelProps={{
classes: {
root: classes.cssLabel,
focused: classes.cssFocused
}
}}
InputProps={{
classes: {
root: classes.cssOutlinedInput,
focused: classes.cssFocused,
notchedOutline: classes.notchedOutline
}
}}
label="Custom CSS border"
variant="outlined"
id="custom-css-outlined-input"
/>
</div>
javascript html css reactjs material-ui
Normally you could avoid using !important by making the css rule a higher specificity, but since you're using styled components instead of rules in a css file i dont think this is possible.
– Shawn Andrews
Nov 19 at 22:34
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
- when I intially load the page the border color of the text box should be red in color.
- but the problem is its showing grey color.
- so I gave border color: red to all the classes.
- but still it doesnt change.
not sure how to target this tag.
i achieved by giving important. is it possible to achieve without giving important
can you guys let me know so that in future I will fix it myself.
- providing my code snippet and sandbox below.
https://codesandbox.io/s/m58841kkwp
cssLabel: {
"&$cssFocused": {
color: { borderColor: "red" }
}
},
cssFocused: { borderColor: "red" },
cssUnderline: {
"&:after": {
borderBottomColor: "red"
}
},
cssOutlinedInput: {
"&$cssFocused $notchedOutline": {
borderColor: "green"
}
},
notchedOutline: { borderColor: "red !important" },
<div className={classes.container}>
<TextField
className={classes.margin}
InputLabelProps={{
classes: {
root: classes.cssLabel,
focused: classes.cssFocused
}
}}
InputProps={{
classes: {
root: classes.cssOutlinedInput,
focused: classes.cssFocused,
notchedOutline: classes.notchedOutline
}
}}
label="Custom CSS border"
variant="outlined"
id="custom-css-outlined-input"
/>
</div>
javascript html css reactjs material-ui
- when I intially load the page the border color of the text box should be red in color.
- but the problem is its showing grey color.
- so I gave border color: red to all the classes.
- but still it doesnt change.
not sure how to target this tag.
i achieved by giving important. is it possible to achieve without giving important
can you guys let me know so that in future I will fix it myself.
- providing my code snippet and sandbox below.
https://codesandbox.io/s/m58841kkwp
cssLabel: {
"&$cssFocused": {
color: { borderColor: "red" }
}
},
cssFocused: { borderColor: "red" },
cssUnderline: {
"&:after": {
borderBottomColor: "red"
}
},
cssOutlinedInput: {
"&$cssFocused $notchedOutline": {
borderColor: "green"
}
},
notchedOutline: { borderColor: "red !important" },
<div className={classes.container}>
<TextField
className={classes.margin}
InputLabelProps={{
classes: {
root: classes.cssLabel,
focused: classes.cssFocused
}
}}
InputProps={{
classes: {
root: classes.cssOutlinedInput,
focused: classes.cssFocused,
notchedOutline: classes.notchedOutline
}
}}
label="Custom CSS border"
variant="outlined"
id="custom-css-outlined-input"
/>
</div>
javascript html css reactjs material-ui
javascript html css reactjs material-ui
asked Nov 19 at 22:25
inji inji
6210
6210
Normally you could avoid using !important by making the css rule a higher specificity, but since you're using styled components instead of rules in a css file i dont think this is possible.
– Shawn Andrews
Nov 19 at 22:34
add a comment |
Normally you could avoid using !important by making the css rule a higher specificity, but since you're using styled components instead of rules in a css file i dont think this is possible.
– Shawn Andrews
Nov 19 at 22:34
Normally you could avoid using !important by making the css rule a higher specificity, but since you're using styled components instead of rules in a css file i dont think this is possible.
– Shawn Andrews
Nov 19 at 22:34
Normally you could avoid using !important by making the css rule a higher specificity, but since you're using styled components instead of rules in a css file i dont think this is possible.
– Shawn Andrews
Nov 19 at 22:34
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
The problem is that your CustomizedInputs-notchedOutline
class is being overwritten by the MuiOutlinedInput-notchedOutline
class, the output css is something like this:
.CustomizedInputs-notchedOutline-1356 {
border-color: red; //this is your class
}
.MuiOutlinedInput-root-1382 .MuiOutlinedInput-notchedOutline-1389 {
border-color: rgba(0, 0, 0, 0.23); //this is the class that is overwriting yours
}
You have to use or create a stronger selector to the element something like this:
.more.class { //multiple class selector
border-color: red;
}
Note: if you have access to the class that is overwriting yours just change it.
EDIT:
As I told you, you can use a stronger selector, add & $notchedOutline
selector to cssOutlinedInput
something like this:
cssOutlinedInput: {
"& $notchedOutline": { //add this nested selector
borderColor: "red",
},
"&$cssFocused $notchedOutline": {
borderColor: "green"
}
}
and of course remove the !important
from notchedOutline: { borderColor: "red !important" },
hey I see different numbers outside the class CustomizedInputs-notchedOutline-1356, we cant use the numbers since each time the numbers might change....is there anyway can we fix it
– inji inji
Nov 20 at 3:10
@injiinji that number are related to the context of react so you cant't use it. my advice is to add another class toCustomizedInputs-notchedOutline
element so you will have 2 classes to reference the element thus that will be a stronger selector and will overwrite theMuiOutlinedInput-notchedOutline
.
– Yandy_Viera
Nov 20 at 14:37
thanks for your reply...can you update in my sandbox so confusing :( codesandbox.io/s/m58841kkwp
– inji inji
Nov 20 at 15:02
1
@injiinji that is to reference the component itself, when you want to nest a selector in original css will be like.parent .child {}
so in that case to reference thechild
insideparent
is like& $child
, if it works I will appreciate if you upvote and check as resolve my answer. I'm glad to help you.
– Yandy_Viera
Nov 20 at 21:38
1
@injiinji about selector try this cssinjs.org/?v=v9.8.7 and cssinjs.org/react-jss/?v=v8.6.1
– Yandy_Viera
Nov 20 at 21:58
|
show 8 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53383542%2fmaterial-ui-border-color-overwriting-the-texbox%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
The problem is that your CustomizedInputs-notchedOutline
class is being overwritten by the MuiOutlinedInput-notchedOutline
class, the output css is something like this:
.CustomizedInputs-notchedOutline-1356 {
border-color: red; //this is your class
}
.MuiOutlinedInput-root-1382 .MuiOutlinedInput-notchedOutline-1389 {
border-color: rgba(0, 0, 0, 0.23); //this is the class that is overwriting yours
}
You have to use or create a stronger selector to the element something like this:
.more.class { //multiple class selector
border-color: red;
}
Note: if you have access to the class that is overwriting yours just change it.
EDIT:
As I told you, you can use a stronger selector, add & $notchedOutline
selector to cssOutlinedInput
something like this:
cssOutlinedInput: {
"& $notchedOutline": { //add this nested selector
borderColor: "red",
},
"&$cssFocused $notchedOutline": {
borderColor: "green"
}
}
and of course remove the !important
from notchedOutline: { borderColor: "red !important" },
hey I see different numbers outside the class CustomizedInputs-notchedOutline-1356, we cant use the numbers since each time the numbers might change....is there anyway can we fix it
– inji inji
Nov 20 at 3:10
@injiinji that number are related to the context of react so you cant't use it. my advice is to add another class toCustomizedInputs-notchedOutline
element so you will have 2 classes to reference the element thus that will be a stronger selector and will overwrite theMuiOutlinedInput-notchedOutline
.
– Yandy_Viera
Nov 20 at 14:37
thanks for your reply...can you update in my sandbox so confusing :( codesandbox.io/s/m58841kkwp
– inji inji
Nov 20 at 15:02
1
@injiinji that is to reference the component itself, when you want to nest a selector in original css will be like.parent .child {}
so in that case to reference thechild
insideparent
is like& $child
, if it works I will appreciate if you upvote and check as resolve my answer. I'm glad to help you.
– Yandy_Viera
Nov 20 at 21:38
1
@injiinji about selector try this cssinjs.org/?v=v9.8.7 and cssinjs.org/react-jss/?v=v8.6.1
– Yandy_Viera
Nov 20 at 21:58
|
show 8 more comments
up vote
1
down vote
accepted
The problem is that your CustomizedInputs-notchedOutline
class is being overwritten by the MuiOutlinedInput-notchedOutline
class, the output css is something like this:
.CustomizedInputs-notchedOutline-1356 {
border-color: red; //this is your class
}
.MuiOutlinedInput-root-1382 .MuiOutlinedInput-notchedOutline-1389 {
border-color: rgba(0, 0, 0, 0.23); //this is the class that is overwriting yours
}
You have to use or create a stronger selector to the element something like this:
.more.class { //multiple class selector
border-color: red;
}
Note: if you have access to the class that is overwriting yours just change it.
EDIT:
As I told you, you can use a stronger selector, add & $notchedOutline
selector to cssOutlinedInput
something like this:
cssOutlinedInput: {
"& $notchedOutline": { //add this nested selector
borderColor: "red",
},
"&$cssFocused $notchedOutline": {
borderColor: "green"
}
}
and of course remove the !important
from notchedOutline: { borderColor: "red !important" },
hey I see different numbers outside the class CustomizedInputs-notchedOutline-1356, we cant use the numbers since each time the numbers might change....is there anyway can we fix it
– inji inji
Nov 20 at 3:10
@injiinji that number are related to the context of react so you cant't use it. my advice is to add another class toCustomizedInputs-notchedOutline
element so you will have 2 classes to reference the element thus that will be a stronger selector and will overwrite theMuiOutlinedInput-notchedOutline
.
– Yandy_Viera
Nov 20 at 14:37
thanks for your reply...can you update in my sandbox so confusing :( codesandbox.io/s/m58841kkwp
– inji inji
Nov 20 at 15:02
1
@injiinji that is to reference the component itself, when you want to nest a selector in original css will be like.parent .child {}
so in that case to reference thechild
insideparent
is like& $child
, if it works I will appreciate if you upvote and check as resolve my answer. I'm glad to help you.
– Yandy_Viera
Nov 20 at 21:38
1
@injiinji about selector try this cssinjs.org/?v=v9.8.7 and cssinjs.org/react-jss/?v=v8.6.1
– Yandy_Viera
Nov 20 at 21:58
|
show 8 more comments
up vote
1
down vote
accepted
up vote
1
down vote
accepted
The problem is that your CustomizedInputs-notchedOutline
class is being overwritten by the MuiOutlinedInput-notchedOutline
class, the output css is something like this:
.CustomizedInputs-notchedOutline-1356 {
border-color: red; //this is your class
}
.MuiOutlinedInput-root-1382 .MuiOutlinedInput-notchedOutline-1389 {
border-color: rgba(0, 0, 0, 0.23); //this is the class that is overwriting yours
}
You have to use or create a stronger selector to the element something like this:
.more.class { //multiple class selector
border-color: red;
}
Note: if you have access to the class that is overwriting yours just change it.
EDIT:
As I told you, you can use a stronger selector, add & $notchedOutline
selector to cssOutlinedInput
something like this:
cssOutlinedInput: {
"& $notchedOutline": { //add this nested selector
borderColor: "red",
},
"&$cssFocused $notchedOutline": {
borderColor: "green"
}
}
and of course remove the !important
from notchedOutline: { borderColor: "red !important" },
The problem is that your CustomizedInputs-notchedOutline
class is being overwritten by the MuiOutlinedInput-notchedOutline
class, the output css is something like this:
.CustomizedInputs-notchedOutline-1356 {
border-color: red; //this is your class
}
.MuiOutlinedInput-root-1382 .MuiOutlinedInput-notchedOutline-1389 {
border-color: rgba(0, 0, 0, 0.23); //this is the class that is overwriting yours
}
You have to use or create a stronger selector to the element something like this:
.more.class { //multiple class selector
border-color: red;
}
Note: if you have access to the class that is overwriting yours just change it.
EDIT:
As I told you, you can use a stronger selector, add & $notchedOutline
selector to cssOutlinedInput
something like this:
cssOutlinedInput: {
"& $notchedOutline": { //add this nested selector
borderColor: "red",
},
"&$cssFocused $notchedOutline": {
borderColor: "green"
}
}
and of course remove the !important
from notchedOutline: { borderColor: "red !important" },
edited Nov 20 at 15:50
answered Nov 19 at 23:21
Yandy_Viera
3,43531236
3,43531236
hey I see different numbers outside the class CustomizedInputs-notchedOutline-1356, we cant use the numbers since each time the numbers might change....is there anyway can we fix it
– inji inji
Nov 20 at 3:10
@injiinji that number are related to the context of react so you cant't use it. my advice is to add another class toCustomizedInputs-notchedOutline
element so you will have 2 classes to reference the element thus that will be a stronger selector and will overwrite theMuiOutlinedInput-notchedOutline
.
– Yandy_Viera
Nov 20 at 14:37
thanks for your reply...can you update in my sandbox so confusing :( codesandbox.io/s/m58841kkwp
– inji inji
Nov 20 at 15:02
1
@injiinji that is to reference the component itself, when you want to nest a selector in original css will be like.parent .child {}
so in that case to reference thechild
insideparent
is like& $child
, if it works I will appreciate if you upvote and check as resolve my answer. I'm glad to help you.
– Yandy_Viera
Nov 20 at 21:38
1
@injiinji about selector try this cssinjs.org/?v=v9.8.7 and cssinjs.org/react-jss/?v=v8.6.1
– Yandy_Viera
Nov 20 at 21:58
|
show 8 more comments
hey I see different numbers outside the class CustomizedInputs-notchedOutline-1356, we cant use the numbers since each time the numbers might change....is there anyway can we fix it
– inji inji
Nov 20 at 3:10
@injiinji that number are related to the context of react so you cant't use it. my advice is to add another class toCustomizedInputs-notchedOutline
element so you will have 2 classes to reference the element thus that will be a stronger selector and will overwrite theMuiOutlinedInput-notchedOutline
.
– Yandy_Viera
Nov 20 at 14:37
thanks for your reply...can you update in my sandbox so confusing :( codesandbox.io/s/m58841kkwp
– inji inji
Nov 20 at 15:02
1
@injiinji that is to reference the component itself, when you want to nest a selector in original css will be like.parent .child {}
so in that case to reference thechild
insideparent
is like& $child
, if it works I will appreciate if you upvote and check as resolve my answer. I'm glad to help you.
– Yandy_Viera
Nov 20 at 21:38
1
@injiinji about selector try this cssinjs.org/?v=v9.8.7 and cssinjs.org/react-jss/?v=v8.6.1
– Yandy_Viera
Nov 20 at 21:58
hey I see different numbers outside the class CustomizedInputs-notchedOutline-1356, we cant use the numbers since each time the numbers might change....is there anyway can we fix it
– inji inji
Nov 20 at 3:10
hey I see different numbers outside the class CustomizedInputs-notchedOutline-1356, we cant use the numbers since each time the numbers might change....is there anyway can we fix it
– inji inji
Nov 20 at 3:10
@injiinji that number are related to the context of react so you cant't use it. my advice is to add another class to
CustomizedInputs-notchedOutline
element so you will have 2 classes to reference the element thus that will be a stronger selector and will overwrite the MuiOutlinedInput-notchedOutline
.– Yandy_Viera
Nov 20 at 14:37
@injiinji that number are related to the context of react so you cant't use it. my advice is to add another class to
CustomizedInputs-notchedOutline
element so you will have 2 classes to reference the element thus that will be a stronger selector and will overwrite the MuiOutlinedInput-notchedOutline
.– Yandy_Viera
Nov 20 at 14:37
thanks for your reply...can you update in my sandbox so confusing :( codesandbox.io/s/m58841kkwp
– inji inji
Nov 20 at 15:02
thanks for your reply...can you update in my sandbox so confusing :( codesandbox.io/s/m58841kkwp
– inji inji
Nov 20 at 15:02
1
1
@injiinji that is to reference the component itself, when you want to nest a selector in original css will be like
.parent .child {}
so in that case to reference the child
inside parent
is like & $child
, if it works I will appreciate if you upvote and check as resolve my answer. I'm glad to help you.– Yandy_Viera
Nov 20 at 21:38
@injiinji that is to reference the component itself, when you want to nest a selector in original css will be like
.parent .child {}
so in that case to reference the child
inside parent
is like & $child
, if it works I will appreciate if you upvote and check as resolve my answer. I'm glad to help you.– Yandy_Viera
Nov 20 at 21:38
1
1
@injiinji about selector try this cssinjs.org/?v=v9.8.7 and cssinjs.org/react-jss/?v=v8.6.1
– Yandy_Viera
Nov 20 at 21:58
@injiinji about selector try this cssinjs.org/?v=v9.8.7 and cssinjs.org/react-jss/?v=v8.6.1
– Yandy_Viera
Nov 20 at 21:58
|
show 8 more comments
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53383542%2fmaterial-ui-border-color-overwriting-the-texbox%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Normally you could avoid using !important by making the css rule a higher specificity, but since you're using styled components instead of rules in a css file i dont think this is possible.
– Shawn Andrews
Nov 19 at 22:34