RaisedButton 类

RaisedButton 类是 Material-UI 中用于创建凸起按钮的组件。它是基于 React 和 Material Design 构建的，并且提供了丰富的自定义选项和交互功能。

安装

使用 npm 进行安装：

npm install @material-ui/core

导入

导入 RaisedButton 组件：

import RaisedButton from '@material-ui/core/RaisedButton';

用法

使用 RaisedButton 创建凸起按钮：

<RaisedButton>Click me</RaisedButton>

属性

RaisedButton 组件支持以下属性：

children

• 类型：node
• 默认值：无

按钮的内部内容。

className

• 类型：string
• 默认值：无

给按钮添加额外的 CSS 类。

color

• 类型：string
• 默认值：'default'
• 可选值：'default' | 'primary' | 'secondary'

按钮的颜色设置。可以选择默认、主色或次要色。

disabled

• 类型：bool
• 默认值：false

禁用按钮。

onClick

• 类型：func
• 默认值：无

按钮点击事件的处理函数。

variant

• 类型：string
• 默认值：'text'
• 可选值：'text' | 'outlined' | 'contained'

按钮的变体。可以选择纯文本按钮、带边框的按钮或填充颜色的按钮。

示例

以下示例演示了如何设置 RaisedButton 的不同属性：

import RaisedButton from '@material-ui/core/RaisedButton';

function MyButton() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return (
    <div>
      <RaisedButton>Default Button</RaisedButton>

      <RaisedButton color="primary">Primary Button</RaisedButton>

      <RaisedButton color="secondary">Secondary Button</RaisedButton>

      <RaisedButton disabled>Disabled Button</RaisedButton>

      <RaisedButton onClick={handleClick} variant="outlined">
        Outlined Button
      </RaisedButton>

      <RaisedButton onClick={handleClick} variant="contained" color="primary">
        Contained Button
      </RaisedButton>
    </div>
  );
}

更多信息

有关按钮组件的更多信息和使用方法，请参阅 Material-UI 文档。