score:1
Accepted 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 & $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" },
Source: stackoverflow.com
Related Query
- material ui border color overwriting the texbox
- Material UI: How can I change the border color of the Select component?
- How do I change the weight and color of the border of the Material UI Dialog?
- Change the border bottom color of material ui textfield
- Change the border color of Material UI Autocomplete on hover
- how to set the border color to Card component in React material ui
- In Material UI, how can I change the border color of the TextField only after the user enters text?
- How can I change the border color when I hover a button with Material UI
- How do I find which Material UI default theme label will change the default border color (not focus or hover border)?
- How to change the border color of MUI TextField
- Change color of Select component's border and arrow icon Material UI
- How do you change the Stepper color on React Material UI?
- How to change the text color of the selected row in material ui table
- color change for the loading bar component of material ui
- Unable to change border color when focused and not focused of Material UI Input
- How to set the background color of material ui drawer component with styled-components?
- How to override global border color styles for disabled Material UI TextField?
- customizing the expansionpanel in material ui and overwriting the styles
- Changing the color of the Inactive Tab Color in Material UI
- Change the MobileStepper color on React Material UI
- Change the tick color in MuiCheckbox material UI
- How i can remove the blue border in Material React Modal?
- how to change the color of childs elements on card hover in material ui?
- material ui change the checkbox color
- Change the base color font from stripe CardNumberElement on Material UI
- How do I set the text color of primary raised buttons for React Material UI?
- In Material UI how can I dynamically pass down the color to my style?
- How to change the color of the placeholder in material UI React js
- I want to change the color of button in react using material ui
- changing the color of card in material ui conditionally?
More Query from same tag
- Getting Value from Input Field in React JS
- react-hooks/exhaustive-deps causing dependency warning, fix hangs code
- React Leaflet: Dynamic Markers, cannot read property 'addLayer'
- How to use justify content property in react native?
- How to Hot Reload Sass Using Webpack 2?
- How to style the react-stripe-checkout form?
- React-query useQuery, GraphQL + fetch. How to pass variables?
- NextJS Dynamic Routing, re-render specific Child Components
- Set opacity's volume onPress of TouchableOpacity manually in React-Native
- React Native Phone Number Input
- Request cannot be constructed from a URL that includes credentials
- Fit parent height for Table in Material UI?
- Meteor and ReactJS - Date retrieved from MongoDB to String?
- reactjs fetch PUT value and pass value to state
- Dynamically import React component from external URL and use parent React environment
- How to Use Helper Function that Calls an API to Work Inside of UseEffect Hook
- Sort table with data dom graphQL
- is there a more elegant way to generate a wrapper/parent div for a map() of divs?
- Updating prop on a specific component based on API response
- How can I combine express and react?
- Is there a way to load react library files separately and not in the bundled files when using react with babel, webpack and gulp as building tool?
- Cannot use relative path when using img tag react
- How to not render a Header on landing(Login page) page but always on all other pages in react-router v6?
- get first element selected in options Material-UI React
- How to get the length of the text inside the React component
- I am getting error "POST http://localhost:3001/auth/login 400 (Bad Request)"
- Font Awesome 5 use social/brand icons in React
- e.preventDefault not working when I trigger it from Submit button but working when triggered from onSubmit attribute in Form tag in React
- react - children component not showing
- Spring Boot Security module gives 403 error when called by using axios from react but works fine in postman