从Materialui组件中删除/覆盖默认样式 [英] Remove / Override default styles from materialui components

问题描述

我正在尝试更改menuitem弹出框的背景颜色.但是我无法从menuitem中删除paddingtop和paddingBottom.这很烦人，因为某些Materialui组件从纸张，列表，菜单等继承样式.是否有一种干净有效的方法来解决此问题?例如，在主题等中使用替代.

I'm trying to change the background color of the menuitem popover. But I am unable to remove paddingtop and paddingBottom from menuitem. It's kind of annoying because some materialui components inherit styles from paper, list, menu and etc. Is there a clean and efficient way to work around this? For eg, using overrides in theme and etc.

我有实验，我知道可以使用内联样式/类来完成，但是我不希望使用该方法.我尝试使用ListProps = {{disablePadding:true}}，MenuProps = {{{disablePadding:true}}.但这不起作用.

I have experiment and I know it can be done using inline styles/classes but i do not wish to use that method. I've tried using ListProps={{disablePadding: true}}, MenuProps={{{disablePadding: true}}. But it Doesn't work.

       <FormControl className={classes.formControl}>
            <Select
            value={value.groupId}
            onChange={handleChange}
            MenuProps={{
                getContentAnchorEl: null,
                anchorOrigin: {
                  vertical: "bottom",
                  horizontal: "left",
                },
              }}
            classes={{
                icon:  isDarkMode ?  classes.iconLight :classes.icon,

            }}
            ListProps={{disablePadding: true}}
            inputProps={{
                name: 'groupId',
                id: 'group-machines',
              }}
            >

        {
            equipmentgroups.map(equipmentgroup =>
            <MenuItem 
            style={isDarkMode ? {backgroundColor: theme.palette.primary.dark} : 
            {backgroundColor: theme.palette.secondary.main}}
            className={classes.menuItemDisplay}  
            value={equipmentgroup.groupId}
            key={equipmentgroup.groupId}
            >{equipmentgroup.groupName}</MenuItem>
            )

        }

            </Select>
        </FormControl>

当我检查元素时，我仍然在得到它.

I'm still GETTING this when I'm inspecting the element.

        .MuiList-padding-370 {
             padding-top: 8px;
             padding-bottom: 8px;
         }

推荐答案

您需要MenuProps={{ MenuListProps: { disablePadding: true } }}.

这是一个可行的示例:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

const useStyles = makeStyles(theme => ({
  root: {
    display: "flex",
    flexWrap: "wrap"
  },
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120
  },
  selectEmpty: {
    marginTop: theme.spacing(2)
  }
}));

function SimpleSelect() {
  const classes = useStyles();
  const [values, setValues] = React.useState({
    age: "",
    name: "hai"
  });

  const inputLabel = React.useRef(null);

  function handleChange(event) {
    setValues(oldValues => ({
      ...oldValues,
      [event.target.name]: event.target.value
    }));
  }

  return (
    <form className={classes.root} autoComplete="off">
      <FormControl className={classes.formControl}>
        <InputLabel htmlFor="age-simple">Age</InputLabel>
        <Select
          value={values.age}
          onChange={handleChange}
          MenuProps={{ MenuListProps: { disablePadding: true } }}
          inputProps={{
            name: "age",
            id: "age-simple"
          }}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </form>
  );
}

export default SimpleSelect;

这篇关于从Materialui组件中删除/覆盖默认样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！