Question

Я использую ящик из пользовательского интерфейса материалов и пытаюсь скруглить углы, используя CSS, например:

  style={{
    borderRadius: "25px",
    backgroundColor: "red",
    overflow: "hidden",
    padding: "300px"
  }}

Это работает вроде как, но фактические углы остаются белыми, а не прозрачными .

Как это исправить, чтобы углы были правильно закруглены? Я поместил свой код в следующие коды и поля:

Yooooomi · Answer 1 · 17 марта 2020

Причина

Ваш SwipeableDrawer оборачивает ваш контент внутри <Paper /> компонента. Бумажный компонент Materiaul-UI имеет тени и непрозрачный фон.

Решение

Вы не используете имена классов, вы используете стиль, поэтому правильным способом было бы установить для SwipeableDrawer paperProps значение :

PaperProps={{ elevation: 0, style: { backgroundColor: "transparent" } }}

PS: вместо того, чтобы ваш borderRadius был на вашем div, вы можете установить его на самой бумаге, используя тот же реквизит

PaperProps={{ square: false }}

И удалить свой borderRadius из вашего div

Если вы использовали classNames ( do c), вы можете установить для бумаги className одно из ваших значений, используя classes prop:

classes={{ paper: classes.someClassName }}