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

import { Button } from 'react-bootstrap';

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

/* 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>
  );
}

/* 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>
  );
}

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>
  );
}

/* 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>
  );
}