Удалить / переопределить стили по умолчанию из компонентов materialui

Я пытаюсь изменить цвет фона всплывающего меню. Но я не могу удалить paddingtop и paddingBottom из пункта меню. Это немного раздражает, потому что некоторые компоненты materialui наследуют стили от бумаги, списка, меню и т. д. Есть ли чистый и эффективный способ обойти это? Например, использование переопределений в теме и т. д.

У меня есть эксперимент, и я знаю, что это можно сделать с помощью встроенных стилей/классов, но я не хочу использовать этот метод. Я пробовал использовать ListProps = {{disablePadding: true}}, MenuProps = {{{disablePadding: true}}. Но это не работает.

       <FormControl className = {classes.formControl}>
            <Select
            value = {value.groupId}
            onChange = {handleChangeEvent}
            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>

Я все еще ПОЛУЧАЮ это, когда проверяю элемент.

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

reactjs styles overriding material-ui

29.05.2019 04:21

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

6 000

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно 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 handleChangeEvent(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 = {handleChangeEvent}
          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;

Edit Select without padding

Спасибо! Я не знал, что нужно пройти через столько слоев. Элемент проверки только что указал MUIList. Есть ли совет, как сделать это быстрее? Я нашел и другой метод. Добавляя, переопределяет: { MuiList: { padding: { paddingTop: 0, paddingBottom: 0 } } в мою тему createMUI. Целесообразен ли этот метод?

— 29.05.2019 08:07

Использование темы — это хорошо, но точный подход, который вы используете, повлияет на все элементы List, а не только на Select/Menu. Если это то, чего вы хотите, то все в порядке.

— 29.05.2019 13:41

29.05.2019 05:12