React+ASP.NET Core项目中，如何将Bootstrap按钮改为紫色？

首先注意到你已经导入了react-bootstrap的Button组件，但代码里用的是原生<button>标签，既没用到react-bootstrap的组件特性，还写错了React的属性（应该用className而非class），先纠正这个基础问题，再给出三种自定义按钮颜色的方案：

方法一：内联样式（快速测试用） #

适合临时测试自定义颜色，缺点是无法处理hover、active等交互状态：

import React, { Component } from 'react';
import { Button } from 'react-bootstrap';

export class Counter extends Component {
  static displayName = Counter.name;

  constructor(props) {
    super(props);
    this.state = { currentCount: 0 };
  }

  render() {
    // 自定义紫色样式，可替换成你需要的色值
    const purpleBtnStyle = {
      backgroundColor: '#6f42c1',
      borderColor: '#6f42c1',
      color: '#fff',
    };

    return (
      <div>
        <h1>Patient Survey</h1>
        <p>Please click the button below to get started</p>
        <Button style={purpleBtnStyle} size="lg">Go to Survey</Button>
      </div>
    );
  }
}

方法二：自定义CSS类（推荐，可复用） #

适合需要交互状态的场景，样式可复用：

1. 创建Counter.css文件：

/* 自定义紫色按钮基础样式 */
.btn-custom-purple {
  background-color: #6f42c1;
  border-color: #6f42c1;
  color: white;
}

/* 鼠标悬停状态 */
.btn-custom-purple:hover {
  background-color: #5a32a3;
  border-color: #5a32a3;
  color: white;
}

/* 按钮点击激活状态 */
.btn-custom-purple:active {
  background-color: #4c2885;
  border-color: #4c2885;
}

2. 在组件中导入并使用：

import React, { Component } from 'react';
import { Button } from 'react-bootstrap';
import './Counter.css'; // 导入自定义样式

export class Counter extends Component {
  static displayName = Counter.name;

  constructor(props) {
    super(props);
    this.state = { currentCount: 0 };
  }

  render() {
    return (
      <div>
        <h1>Patient Survey</h1>
        <p>Please click the button below to get started</p>
        <Button className="btn-custom-purple" size="lg">Go to Survey</Button>
      </div>
    );
  }
}

react-bootstrap的Button组件会自动添加btn类，不需要手动重复添加。

方法三：Bootstrap Sass全局自定义（适合全项目复用） #

如果你的项目使用Bootstrap的Sass版本，可以通过修改变量全局定义自定义按钮样式：

1. 安装Bootstrap Sass：

npm install bootstrap-sass --save

2. 创建custom-bootstrap.scss文件：

// 导入Bootstrap变量文件
@import 'bootstrap-sass/assets/stylesheets/bootstrap/variables';

// 定义自定义紫色变量
$custom-purple: #6f42c1;
$custom-purple-dark: #5a32a3;

// 生成自定义按钮样式
.btn-custom-purple {
  @include button-variant($custom-purple, $custom-purple, $custom-purple-dark, $custom-purple-dark);
}

// 导入完整Bootstrap样式
@import 'bootstrap-sass/assets/stylesheets/bootstrap';

3. 在项目入口文件（如index.js）导入这个Sass文件：

import './custom-bootstrap.scss';

4. 之后在组件中直接使用类名即可，和方法二的组件代码一致。

内容的提问来源于stack exchange，提问作者Catherine Baker