一个常见的用例是使用按钮触发导航到新页面的操作。
ButtonBase
组件提供了一个处理此用例的属性:
component
。 然而,一些特定
ButtonBase
的代码需要所给组件的 DOM 节点。 在组件上附加一个 ref,并且预期此组件能够将这个 ref 传递到下层 DOM 节点,通过这样的方法可以实现。 鉴于我们的许多交互式组件都依赖于
ButtonBase
,您可以在任何情况都能受益于它。
这有一个
与 react-router 交互的例子
。
在 disabled 不可用的按钮上,ButtonBase 组件会有这个设置:
pointer-events: none;
,这样一来不可用样式的鼠标悬浮就不会出现。
若您希望使用
not-allowed
, 您有以下两种选择:
CSS only
。 您可以移除作用在
<button>
元素上的指针事件的样式:
.MuiButtonBase-root:disabled {
cursor: not-allowed;
pointer-events: auto;
如您要 在 disabled 不可用元素上显示提示文本,则需添加 pointer-events: none;
若您加载除了一个 button 元素之外的元素, 例如,一个链接 <a>
元素,指针是不会改变的。
改变 DOM。 您可以这样封装按钮:
<span style={{ cursor: 'not-allowed' }}>
<Button component={Link} disabled>
</Button>
</span>
这个方法能支持任何元素,例如,一个 <a>
元素。