跳转到内容
编辑此页面

Button API

想要学习更多组件属性和 CSS API，可以查阅 React Button 组件的 API 文档。

导入

import Button from '@mui/material/Button';
// 或
import { Button } from '@mui/material';
你可以阅读这个关于最小化捆绑包的指南以了解以上二者的差异。

组件名称

在主题中，名称“MuiButton”可用于提供默认属性（props），或者样式覆盖

属性

ButtonBase 组件的属性也是可用的。

名称类型默认值描述
childrennode
组件的内容
classesobject
覆盖或扩展应用于组件的样式。请参阅下文CSS API 了解更多详情。
color'inherit'
| 'primary'
| 'secondary'
| 'success'
| 'error'
| 'info'
| 'warning'
| string		'primary'
The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.
componentelementType
The component used for the root node. Either a string to use a HTML element or a component.
disabledboolfalse
如果被设置为 true，那么该组件将会被禁用。
disableElevationboolfalse
如果 true, 则不使用提升效果。
disableFocusRippleboolfalse
如果设置为 true，由键盘聚焦产生的涟漪效果将会被禁用。
disableRippleboolfalse
If true, the ripple effect is disabled.
⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the focusVisibleClassName.
endIconnode
放置在孩子之后的元素。
fullWidthboolfalse
如果设置为 true，按钮将占据其容器的全部宽度。
hrefstring
点击按钮时链接到的URL。 如果被定义, a 元素将被用作根节点.
size'small'
| 'medium'
| 'large'
| string		'medium'
The size of the button. small is equivalent to the dense button styling.
startIconnode
放置在孩子之前的元素。
sxArray<func
| object
| bool>
| func
| object
The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
variant'contained'
| 'outlined'
| 'text'
| string		'text'
使用的变体。

ref 则会被传递到根元素中。

继承

尽管上文没有明文记录， ButtonBase 组件 的属性(props) 在组件Button上同样是可用的。 你可以利用这一点来 指向嵌套组件

CSS

规则名称全局类名描述
root.MuiButton-root应用于根元素的样式。
text.MuiButton-text如果为 variant="text" ，应用于 根元素的样式。
textInherit.MuiButton-textInherit如果为 variant="text" 和color="inherit" ，应用于 根元素的样式。
textPrimary.MuiButton-textPrimaryStyles applied to 根元素 if variant="text" 和color="primary".
textSecondary.MuiButton-textSecondaryStyles applied to 根元素 if variant="text" 和 color="secondary".
textSuccess.MuiButton-textSuccessStyles applied to the root element if variant="text" and color="success".
textError.MuiButton-textErrorStyles applied to the root element if variant="text" and color="error".
textInfo.MuiButton-textInfoStyles applied to the root element if variant="text" and color="info".
textWarning.MuiButton-textWarningStyles applied to the root element if variant="text" and color="warning".
outlined.MuiButton-outlinedStyles applied to 根元素 if variant="outlined".
outlinedInherit.MuiButton-outlinedInheritStyles applied to 根元素 if variant="outlined" 和color="inherit".
outlinedPrimary.MuiButton-outlinedPrimaryStyles applied to 根元素 if variant="outlined" 和color="primary".
outlinedSecondary.MuiButton-outlinedSecondaryStyles applied to 根元素 if variant="outlined" 和color="secondary".
outlinedSuccess.MuiButton-outlinedSuccessStyles applied to the root element if variant="outlined" and color="success".
outlinedError.MuiButton-outlinedErrorStyles applied to the root element if variant="outlined" and color="error".
outlinedInfo.MuiButton-outlinedInfoStyles applied to the root element if variant="outlined" and color="info".
outlinedWarning.MuiButton-outlinedWarningStyles applied to the root element if variant="outlined" and color="warning".
contained.MuiButton-containedStyles applied to 根元素 if variant="contained".
containedInherit.MuiButton-containedInheritStyles applied to 根元素 if variant="contained" 和color="inherit".
containedPrimary.MuiButton-containedPrimaryStyles applied to 根元素 if variant="contained" 和color="primary".
containedSecondary.MuiButton-containedSecondaryStyles applied to 根元素 if variant="contained" 和 color="secondary".
containedSuccess.MuiButton-containedSuccessStyles applied to the root element if variant="contained" and color="success".
containedInfo.MuiButton-containedInfoStyles applied to the root element if variant="contained" and color="info".
containedError.MuiButton-containedErrorStyles applied to the root element if variant="contained" and color="error".
containedWarning.MuiButton-containedWarningStyles applied to the root element if variant="contained" and color="warning".
disableElevation.MuiButton-disableElevationStyles applied to 根元素 if disableElevation={true}.
focusVisible.Mui-focusVisiblePseudo-class applied to the ButtonBase root element if the button is keyboard focused.
disabled.Mui-disabledPseudo-class applied to the root element if disabled={true}.
colorInherit.MuiButton-colorInheritStyles applied to the root element if color="inherit".
textSizeSmall.MuiButton-textSizeSmallStyles applied to the root element if size="small" and variant="text".
textSizeMedium.MuiButton-textSizeMediumStyles applied to the root element if size="medium" and variant="text".
textSizeLarge.MuiButton-textSizeLargeStyles applied to the root element if size="large" and variant="text".
outlinedSizeSmall.MuiButton-outlinedSizeSmallStyles applied to the root element if size="small" and variant="outlined".
outlinedSizeMedium.MuiButton-outlinedSizeMediumStyles applied to the root element if size="medium" and variant="outlined".
outlinedSizeLarge.MuiButton-outlinedSizeLargeStyles applied to the root element if size="large" and variant="outlined".
containedSizeSmall.MuiButton-containedSizeSmallStyles applied to the root element if size="small" and variant="contained".
containedSizeMedium.MuiButton-containedSizeMediumStyles applied to the root element if size="medium" 和variant="contained".
containedSizeLarge.MuiButton-containedSizeLargeStyles applied to the root element if size="large" and variant="contained".
sizeSmall.MuiButton-sizeSmallStyles applied to 根元素 if size="small".
sizeMedium.MuiButton-sizeMediumStyles applied to 根元素 if size="medium".
sizeLarge.MuiButton-sizeLargeStyles applied to 根元素 if size="large".
fullWidth.MuiButton-fullWidthStyles applied to 根元素 if fullWidth={true}.
startIcon.MuiButton-startIconStyles applied to the startIcon element if supplied.
endIcon.MuiButton-endIconStyles applied to the endIcon element if supplied.
iconSizeSmall.MuiButton-iconSizeSmallStyles applied to the icon element if supplied and size="small".
iconSizeMedium.MuiButton-iconSizeMediumStyles applied to the icon element if supplied and size="medium".
iconSizeLarge.MuiButton-iconSizeLargeStyles applied to the icon element if supplied and size="large".

您可以使用组件自定义选项对组件进行个性化：

演示项目