Reactjs 搜索栏故障，随机（假定）发生

我已经有一段时间出现这个问题了，搜索栏的轮廓关闭的空间比聚焦的空间要大。当我重新加载页面时，它会消失，我可以重新加载和调整代码一段时间，什么也不会发生，但在随机重新加载后，它会回来。有人能帮忙吗

问题:

每次的预期结果：

从“React”导入React；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/TextField”导入TextField；
从“@material ui/icons/Search”导入SearchIcon；
从“@material ui/core/IconButton”导入IconButton；
从“@material ui/core/inputadornation”导入输入；
常量样式=主题=>({
容器：{
显示：“flex”，
},
风格：{
职位：“相对”，
左:0,，
前30名，
显示：“flex”
},
根目录：{
显示：“flex”，
},
cssLabel：{
前12名，
“&$cssFocused”：{
颜色：“0D9DCE”，
排名：0，
左：0
},
},
CSS焦点：{}，
输入道具：{
颜色：“红色”，
},
cssOutlinedInput：{
边界半径：65，
“&$cssfoccused$notchdoutline”：{
边框颜色：“0D9DCE”，
},
},
双线：{
边界半径：45，
},
“@媒体屏幕和（最小宽度：600px）和（最大宽度：950px）”：{
风格：{
top:23
},
双线：{
身高：50，
},      
cssLabel：{
前7名，
“&$cssFocused”：{
颜色：“0D9DCE”，
排名：0，
}}
},
“@media（宽度：599px）”：{
双线：{
宽度：250
},   
cssOutlinedInput：{
宽度：250
}   
},
“@media（最大宽度：599px）”：{
风格：{
显示：“无”
},
双线：{
身高：40，
边框颜色：“白色！重要”
},
cssLabel：{
尺寸：12，
排名：3，
颜色：“白色”，
“&$cssFocused”：{
排名：0
},
},
CSS重点：{
颜色：“白色”，
},
cssOutlinedInput：{
背景：“黑色”，
“&$cssfoccused$notchdoutline”：{
边框颜色：“0D9DCE！重要”，
},
},
},
“@媒体屏幕和（宽：375px）和（高：812px）”：{
cssOutlinedInput：{
背景：“黑色”，
前10名，
“&$cssfoccused$notchdoutline”：{
边框颜色：“0D9DCE！重要”，
},
},
cssLabel：{
排名：13.5，
“&$cssFocused”：{
颜色：“0D9DCE”，
前10名
}}
},
});
类OutlinedTextFields扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
A:错
};
this.searchOn=this.searchOn.bind（this）；
}
searchOn（）{
this.setState（{active:true}）
}
render（）{
const{classes}=this.props；
返回(
);
}
}
导出默认样式（样式）（OutlinedTextFields）；

发生这种情况时，最好的方法是右键单击inspect元素。您可以检查是否存在阻止javascript运行的任何页面错误，或者布局中添加了意外的css类。出现这种情况时，最好是右键单击inspect元素。您可以检查是否有任何页面错误阻止javascript运行，或者布局中添加了意外的css类。

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import SearchIcon from '@material-ui/icons/Search';
import IconButton from '@material-ui/core/IconButton';
import InputAdornment from '@material-ui/core/InputAdornment';

const styles = theme => ({
  container: {
    display: 'flex',

  },
  style:{
    position:"relative", 
    left:0,
    top:30,
  display:"flex"
  },

  root: {
    display: 'flex',

  },


  cssLabel: {
top:12,

    '&$cssFocused': {
      color: "#0D9DCE",
top:0,
left:0
    },
  },
  cssFocused: {},
  InputProps:{
   color: "red",

  },


  cssOutlinedInput: {
    borderRadius: 65,
    '&$cssFocused $notchedOutline': {
      borderColor: "#0D9DCE",

    },
  },

  notchedOutline: {
    borderRadius: 45,
  },


  '@media screen and (min-width: 600px) and (max-width: 950px)':{
    style:{
top:23
    },

    notchedOutline: {
      height:50,

    },      
    cssLabel: {
      top:7,
          '&$cssFocused': {
            color: "#0D9DCE",
      top:0,

          }}


  },

  '@media (width: 599px)':{
    notchedOutline: {
     width:250

    },   
    cssOutlinedInput: {
      width:250
    }   

  },


  '@media (max-width: 599px)': {

  style:{
display:"none"
  },
    notchedOutline: {
height:40,
borderColor: 'white !important'
  },
  cssLabel: {
    fontSize: 12,
    top:3,

    color:"white",
    '&$cssFocused': {

top:0


    },

  },
  cssFocused: {
    color:"white",

},
  cssOutlinedInput: {
    background:"black",
    '&$cssFocused $notchedOutline': {
      borderColor: "#0D9DCE !important",



    },

  },
  },



  '@media screen and (width: 375px) and (height: 812px)':{
    cssOutlinedInput: {
      background:"black",
  top:10,
      '&$cssFocused $notchedOutline': {
        borderColor: "#0D9DCE !important",



      },

    },
    cssLabel: {
      top:13.5,
          '&$cssFocused': {
            color: "#0D9DCE",
top:10

          }}
  },



});


class OutlinedTextFields extends React.Component {

    constructor(props) {
    super(props);
    this.state = {
      searchA: false
    };

    this.searchOn = this.searchOn.bind(this);

  }
  searchOn(){
    this.setState({active: true})
  }


  render() {
    const { classes } = this.props;

    return (

      <form className= "conT" noValidate autoComplete="off">


        <TextField
        autoFocus={true}
         fullWidth
          className={`${classes.textField} without-padding`}
        InputLabelProps={{
          classes: {
            root: classes.cssLabel,
            focused: classes.cssFocused,

          },
        }}
        InputProps={{

          classes: {
            root: classes.cssOutlinedInput,
            focused: classes.cssFocused,
            notchedOutline: classes.notchedOutline,
            MuiOutlinedInput: classes.MuiOutlinedInput
          },
        }}
        label="Search"
        variant="outlined"
        id="custom-css-outlined-input"

        >

</TextField>
<InputAdornment >
<IconButton onClick="/Screens/Home"
className={classes.style} 
>
        <SearchIcon 
        />
        </IconButton>

        </InputAdornment>
      </form>

    );
  }
}



export default withStyles(styles)(OutlinedTextFields);