0
177
ViewsHow to Style specific/single Item or a Component using Custom Css in React Js?
I have been trying to style the search bar which is the TextFiled component used from react Material Ui library. However, I tried to do using External and Inline CSS but no results.
I tried to do using Withstyle, it does work but it is also affecting other TextFiled on another components. The issue is how can only target one specific item?
The real Search bar/TextFiled image is below in black border by default I want to make it white.
The code I tried:
const TextFiledStyle = withStyles({
root: {
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: 'white',
},
'&:hover fieldset': {
borderColor: '#356E44',
},
'&.Mui-focused fieldset': {
borderColor: 'gray',
},
},
},
})(TextField);
Any Help or suggestions would be really appriciated.
2 answers
Answer question0
I think you should just be able to add a class name to the component as you use it.
<TextField className="custom-class">some text</TextField>
Then just adjust the css as you need. e.g.
.custom-class .MuiOutlinedInput-root fieldset {
borderColor: white;
}
See more in the docs. https://mui.com/customization/how-to-customize/#overriding-styles-with-class-names
0
Thanks for the help I have to twist around a little bit but found the answer which is as below:
const useStyles = makeStyles (theme => ({
textbox:{
'& .MuiOutlinedInput-root': {
color: 'white',
border: '1px solid white'
}
},
}))