To gain insight into how to override these styles, it is essential to examine their definitions in the Material-UI source code. The question you mentioned also provides a glimpse of the required syntax.
Displayed below is a condensed representation (styles unrelated to the outline have been omitted) of the styles extracted from OutlinedInput.js:
export const styles = theme => {
const borderColor =
theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
return {
/* Styles applied to the root element. */
root: {
position: 'relative',
'& $notchedOutline': {
borderColor,
},
'&:hover:not($disabled):not($focused):not($error) $notchedOutline': {
borderColor: theme.palette.text.primary,
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
borderColor,
},
},
'&$focused $notchedOutline': {
borderColor: theme.palette.primary.main,
borderWidth: 2,
},
'&$error $notchedOutline': {
borderColor: theme.palette.error.main,
},
'&$disabled $notchedOutline': {
borderColor: theme.palette.action.disabled,
},
},
/* Styles applied to the root element if the component is focused. */
focused: {},
/* Styles applied to the root element if `disabled={true}`. */
disabled: {},
/* Styles applied to the root element if `error={true}`. */
error: {},
/* Styles applied to the `NotchedOutline` element. */
notchedOutline: {}
};
};
The "outline" of OutlinedInput can be managed by adjusting the border property on the NotchedOutline component enclosed within it. To affect this nested element, you must define a "notchedOutline" class (even if empty) for targeting the element based on different parent states (e.g., focused, hover).
Here is an example that completely eliminates the border:
import React from "react";
import ReactDOM from "react-dom";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import InputAdornment from "@material-ui/core/InputAdornment";
import { withStyles } from "@material-ui/core/styles";
const styles = theme => ({
root: {
"& $notchedOutline": {
borderWidth: 0
},
"&:hover $notchedOutline": {
borderWidth: 0
},
"&$focused $notchedOutline": {
borderWidth: 0
}
},
focused: {},
notchedOutline: {}
});
function App(props) {
const { classes } = props;
return (
<div className="App">
<OutlinedInput
disableUnderline={true}
notched={true}
id="adornment-weight"
classes={classes}
value={1}
endAdornment={<InputAdornment sposition="end">BTC</InputAdornment>}
/>
</div>
);
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);
https://codesandbox.io/s/94k34o11np