Question

我一直在尝试使searchIcon中的const search的媒体查询正常工作，但是其他媒体查询不是很好，但是这个。

我尝试在const styles而不是const search上实现它，并在index.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';


const styles = theme => ({
  container: {
    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: 15,
  },
  '@media screen and (min-width: 600px) and (max-width: 950px)':{
    notchedOutline: {
      height:50,

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

          }}


  },

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

    },   
    cssOutlinedInput: {
      width:250
    }   

  },


  '@media (max-width: 599px)': {
  notchedOutline: {
height:40,
borderColor: 'white !important'
  },
  cssLabel: {
    fontSize: 12,
    top:5,

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




    },

  },
  cssFocused: {
    color:"white",

},
  cssOutlinedInput: {
    background:"black",

    '&$cssFocused $notchedOutline': {
      borderColor: "#0D9DCE !important",



    },

  },
  },






});

const search ={
style:{
  position:"relative", 
  left:0,
  top:100,
display:"flex"
},

'@media screen and (width: 599px)':{
  style:{
    left:10,
  top:100
  }
},

}

class OutlinedTextFields extends React.Component {

  handleChange = name => event => {
    this.setState({
      [name]: event.target.value,
    });
  };

  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>
<IconButton   >
        <SearchIcon style={search.style}/>
        </IconButton>
      </form>

    );
  }
}



export default withStyles(styles)(OutlinedTextFields);

Answer 1

您应该做两件事：

在每个类中使用整个每个媒体查询
将媒体查询声明放入括号对

const styles = {
  someClassName: {
    width: 200,
    ['@media screen and (min-width: 600px) and (max-width: 950px)']: {
      width: 100,
    },
  },
};

SearchIcon上的媒体查询不起作用。 Material-UI，React

1 个答案: