如何为react-bootstrap组件添加自定义样式？

为React Bootstrap组件添加自定义样式可以通过以下几种方式实现：

1. 内联样式

你可以直接在组件上使用style属性来添加内联样式。

import { Button } from 'react-bootstrap';

function CustomButton() {
  return (
    <Button style={{ backgroundColor: 'blue', color: 'white' }}>
      Click me
    </Button>
  );
}

2. CSS类

你可以创建一个CSS文件，并在其中定义你的自定义样式，然后在组件上使用className属性来应用这些样式。

/* custom.css */
.custom-button {
  background-color: blue;
  color: white;
}

import { Button } from 'react-bootstrap';
import './custom.css';

function CustomButton() {
  return (
    <Button className="custom-button">
      Click me
    </Button>
  );
}

3. CSS模块

如果你使用的是Create React App，你可以使用CSS模块来避免全局样式冲突。

/* CustomButton.module.css */
.customButton {
  background-color: blue;
  color: white;
}

import { Button } from 'react-bootstrap';
import styles from './CustomButton.module.css';

function CustomButton() {
  return (
    <Button className={styles.customButton}>
      Click me
    </Button>
  );
}

4. styled-components

你可以使用styled-components库来创建带有自定义样式的组件。

import { Button } from 'react-bootstrap';
import styled from 'styled-components';

const StyledButton = styled(Button)`
  background-color: blue;
  color: white;
`;

function CustomButton() {
  return (
    <StyledButton>
      Click me
    </StyledButton>
  );
}

5. 覆盖Bootstrap样式

如果你需要覆盖Bootstrap的默认样式，可以在你的CSS文件中添加更具体的选择器。

/* custom.css */
.btn.custom-button {
  background-color: blue !important;
  color: white !important;
}

import { Button } from 'react-bootstrap';
import './custom.css';

function CustomButton() {
  return (
    <Button className="btn custom-button">
      Click me
    </Button>
  );
}