Блог

Главная - Вопросы по программированию - Невозможно уменьшить размер кнопки mui для мобильных устройств

Невозможно уменьшить размер кнопки mui для мобильных устройств

#reactjs #material-ui

#reactjs #материал-пользовательский интерфейс

Вопрос:

Итак, я изо всех сил пытаюсь уменьшить размер кнопок с помощью крючка makeStyles и новейшей версии Mui. И какое бы свойство я ни пытался придать своим кнопкам, они не станут уже, чем 64px в ширину в мобильном режиме просмотра (запрашивается медиа). Нужно ли переопределять корневую тему для достижения моей цели?

 <Grid container spacing={0} justify="center" className={classes.nav_mobile}>
                
                <Grid container spacing={0} item sm={12} direction="row" justify="space-evenly" >
                        <a href="/home"><Button className={classes.button_mobile}>Home</Button></a>
                </Grid>
                
                
            </Grid>

makeStyle крюк:

 button_mobile: {
        padding: "0",
        fontFamily: ["Comfortaa" , "cursive"],
        fontSize: '1.5vw',
        backgroundColor: "transparent",
        width: ['8vw', '!important'],
        height: "2vh",
        boxShadow: "none",
        color: "#30786E",
        margin: " 0",

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

1. Можете ли вы включить codesandbox для этого?

2. @bertdida вот так

3. codesandbox.io/s/focused-khayyam-qlxxw?file=/Header.jsx

4. Спасибо. Чего мы пытаемся достичь здесь снова? > 768px Вы хотите, чтобы на экране была кнопка min-width: 64px ?

5. .MuiButton-root имеет min-width: 64px . Вы можете добавить minWidth: "auto" в свой button_mobile стиль, чтобы переопределить это.

Ответ №1:

Спасибо @bertdida. .MuiButton-root Имеет min-width: 64px . Я только что добавил новое min-width свойство, и это решило проблему.