Блог

Я использую material-ui с NextJS и хотел бы, чтобы кнопка была примерно в 4 раза больше ширины большой кнопки. Свойство width, похоже, не имеет никакого эффекта

Компонент

 export function ShiButton(props) {
const classes = useStyles();

const {
    path,
    text,
    colour = "primary",
    variant = "contained",
    size = "large",
} = props;
return (
    <Link href={path} passHref>
        <Button size={size} variant={variant} color={colour} width={900}>
            {text}
        </Button>
    </Link>
);
  

}
Страница вызова

     <ShiButton path="" text="Sign-up" size="large" />
  

Вы можете использовать решение для стилизации Material-UI в своем приложении :

Это CSS для большой кнопки

Поэтому просто увеличьте отступ и / или размер шрифта на X, чтобы добиться большей ширины

 const useStyles = makeStyles({
  FourTimesLargeBtn: {
    padding: "32px 88px",
    fontSize: "3.75rem"
  }
});

function ShiButton(props) {
  const classes = useStyles();

  const {
    path,
    text,
    colour = "primary",
    variant = "contained",
    size = "large"
  } = props;
  return (
    <Link href={path}>
      <Button
        classes={{ root: classes.FourTimesLargeBtn }}
        size={size}
        variant={variant}
        color={colour}
        width={900}
      >
        {text}
      </Button>
    </Link>
  );
}

function App() {
  return <ShiButton text="Hello" />;
}


ReactDOM.render(<App/>, document.getElementById("root"));  

 <div id="root"></div>

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>

<script type="text/babel">
  const { Button, makeStyles, Link } = MaterialUI;
</script>  

Я использую MUI v5 и пользовательскую тему и завершил создание пользовательской кнопки многократного использования большего размера, создав новый вариант xlarge на основе size реквизита.

Итак, в моем пользовательском объекте темы

 {
  ...otherThemeStuff,
  components: {
    MuiButton: {
      variants: [
        {
          props: { size: 'xlarge' },
          style: {
            padding: '14px 28px'
          },
        },
      ],
    }
  }
}
  

Затем в моем компоненте я могу использовать кнопку следующим образом

 <Button size='xlarge'>My button</Button>