Блог

Главная - Вопросы по программированию - как удалить вертикальную линию из постоянного ящика пользовательского интерфейса marerial

как удалить вертикальную линию из постоянного ящика пользовательского интерфейса marerial

#reactjs #material-ui #drawer

Вопрос:

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

Ответ №1:

 <Drawer
        sx={{
          width: drawerWidth,
          flexShrink: 0,
          'amp; .MuiDrawer-paper': {
            width: drawerWidth,
            boxSizing: 'border-box',
          },
          border:"none"
        }}
        variant="permanent"
        anchor="left"
      >

Я работал над мини-вариантом ящика, и я добавил

 border:"none"

и в drawerOpen drawerClose том , и в другом случае это работает на меня.

Вы можете попробовать приведенный выше код.

Ответ №2:

Взгляните на переопределение стилей с withStyles помощью HOC: https://material-ui.com/guides/typescript/#usage-of-withstyles Полный список занятий вы можете посмотреть: https://material-ui.com/api/drawer/ Ты хочешь чего-то подобного:

 const StyledDrawer = withStyles(theme => ({
    // css classes overrides goes here
})(props => <Drawer {...props} />);

Комментарии:

1. это разделительная линия только в постоянном ящике, но я не знаю, как ее удалить (не знаю точной ее опоры ).

2. к классу paperAnchorDockedLeft добавлено право на границу. Переопределите этот класс в стиле ящика. Что-то вроде этого: <Бумага для ящика: clsx({ [classes.drawerOpen]: открыть, [classes.drawerClose]: !открыть, [classes.paperAnchorDockedLeft]: истина }) > и добавьте стиль, такой как paperAnchorDockedLeft: { граница: ‘нет’ }

Метки: