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

enter image description here

The code I tried:

   const TextFiledStyle = withStyles({
    root: {
        '& .MuiOutlinedInput-root': {
            '& fieldset': {
              borderColor: 'white',
            '&:hover fieldset': {
                borderColor: '#356E44',
            '&.Mui-focused fieldset': {
                borderColor: 'gray',

Any Help or suggestions would be really appriciated.


Thanks for the help I have to twist around a little bit but found the answer which is as below:

const useStyles = makeStyles (theme => ({
        '& .MuiOutlinedInput-root': {
            color: 'white',
            border: '1px solid white'


Answered By – Tapesh Patel

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More