MaterialUI, как переписать стили вложенного компонента MUI?

Question

Я использую act-admin , и я использую их Create компонент, который использует TextField из @material-ui/core.

Конечно, у меня естьпрочитайте документацию здесь

Я хотел бы полностью настроить рендер для пользовательского представления, вот как выглядит сгенерированный HTML:

<div class="create-page Component-root-55" notification="">
   <div class="MuiPaper-root-58 MuiPaper-elevation1-61 MuiPaper-rounded-59 MuiCard-root-57 Component-card-56 Create-card-53">
      <form class="simple-form" locale="en">
         <div class="MuiCardContent-root-86 CardContentInner-root-85">
            <div class="ra-input ra-input-email">
               <div class="MuiFormControl-root-11 MuiFormControl-marginNormal-12 MuiFormControl-fullWidth-14" locale="en">
                  <label class="MuiFormLabel-root-20 MuiInputLabel-root-15 MuiInputLabel-formControl-16 MuiInputLabel-animated-19" data-shrink="false" for="email"><span>Email *</span></label>
                  <div class="MuiInput-root-27 MuiInput-fullWidth-34 MuiInput-formControl-28 MuiInput-underline-31"><input aria-invalid="false" class="MuiInput-input-35 MuiInput-inputType-38 withRouter-Connect-SubscribeNewsletterForm---inputType-52" id="email" name="email" type="email" value=""></div>
               </div>
            </div>
         </div>
         <div class="MuiToolbar-root-97 MuiToolbar-regular-99 MuiToolbar-gutters-98 Toolbar-toolbar-92 Toolbar-desktopToolbar-93" role="toolbar">
            <div class="Toolbar-defaultToolbar-95">
               <button tabindex="0" class="MuiButtonBase-root-129 MuiButton-root-103 MuiButton-contained-114 MuiButton-containedPrimary-115 MuiButton-raised-117 MuiButton-raisedPrimary-118 SaveButton-button-101" type="submit">
                  <span class="MuiButton-label-104">
                     <svg class="MuiSvgIcon-root-132 SaveButton-iconPaddingStyle-102" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
                        <g>
                           <path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"></path>
                        </g>
                     </svg>
                     Save
                  </span>
                  <span class="MuiTouchRipple-root-139"></span>
               </button>
            </div>
         </div>
         <div class="Toolbar-spacer-96"></div>
      </form>
   </div>
</div>

У меня есть толькоНемного опыта в переопределении стилей в Material-UI.

После того, как мне удалось найти способ удаления boxShadow к card благодаря объяснению в Create.js, я изо всех сил пытаюсь найти, как редактировать то, что внутриthe create.

Например, я хотел бы удалить фон MuiToolbar, обозначенный MuiToolbar-regular-99, вот что у меня есть:

const createStyles = {
  card: {
    boxShadow: 'none',
    borderRadius: 0,
  },
  toolbar: {
    toolbar: {
      backgroundColor: 'transparent',
    },
  },
};

const Create = withStyles(createStyles)(function Create({ classes, ...rest }) {
  return (
    <CreateDefault
      classes={classes}
      {...rest}
    />
  );
});

Я также пробовал:

const createStyles = {
  card: {
    boxShadow: 'none',
    borderRadius: 0,
  },
  toolbar: {
    backgroundColor: 'transparent',
  },
};

const Create = withStyles(createStyles)(function Create({ classes, ...rest }) {
  console.log(classes);
  return (
    <CreateDefault
      classes={{
        card: classes.card,
        toolbar: classes.toolbar
      }}
      {...rest}
    />
  );
});

Это не относится к CSS на панели инструментов, я не понимаю логику и не нашел jss настолько сложным, что я должен обратиться за помощью.

Может кто-нибудь объяснить мне, как яможет переопределять вложенные стили с помощью компонента пользовательского интерфейса материала, даже если используется оболочка, которая оборачивает много?

Изменить кодыandbox

Ближайшее, что я мог получить тоже: https://codesandbox.io/s/2uboj

По умолчанию не имеет серую панель инструментовиз-за вероятно используемой версии реакции-admin, но вы можете видеть цель.

Answer 1

У вас нет песочницы, и я не могу видеть, где вы используете компонент <TextField />, поэтому я не могу проверить, работает ли это, но я могу показать вам два варианта, которые должны помочь вам с классами.

1. Чтобы применить несколько классов, вы должны сделать:

   className={[classes.card, classes.toolbar].join(' ')}

2. Чтобы получить доступ к элементам внутри компонента материалаВам необходимо использовать API-интерфейсы CSS, перечисленные в разделе API-интерфейсы компонентов в документации по материалам.TextField немного сложнее, так как объединяет несколько других компонентов.Вы должны передать свои классы каждому компоненту как опору.Например,

   <TextField InputProps={classes={classes}}