搜索Bar Glitch，随机发生（据说）

Question

这个问题我已经有一段时间了，搜索栏轮廓关闭了比应有的焦点更多的空间。当我重新加载页面时，它消失了，可以重新加载并调整我的代码一段时间，什么也不会发生，但是在随机重新加载之后，它又回来了。有人可以帮忙吗？

问题：

每次都能获得预期的结果

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);