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>









share|improve this question






















  • 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

















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>









share|improve this question






















  • 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















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>









share|improve this question














  • 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






share|improve this question













share|improve this question











share|improve this question




share|improve this question










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




















  • 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














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 & $notchedOutlineselector 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" },






share|improve this answer























  • 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










  • 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 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




    @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











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
});


}
});














draft saved

draft discarded


















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 & $notchedOutlineselector 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" },






share|improve this answer























  • 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










  • 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 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




    @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















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 & $notchedOutlineselector 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" },






share|improve this answer























  • 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










  • 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 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




    @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













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 & $notchedOutlineselector 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" },






share|improve this answer














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 & $notchedOutlineselector 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" },







share|improve this answer














share|improve this answer



share|improve this answer








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 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






  • 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






  • 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










  • @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






  • 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






  • 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


















draft saved

draft discarded




















































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.




draft saved


draft discarded














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





















































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







Popular posts from this blog

Costa Masnaga

Fotorealismo

Sidney Franklin