自定义尺寸材质-用户界面按钮

Question

我正在将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" />

Answer 1

您可以在应用中使用Material-UI's styling solution

这是大按钮的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>