如何在Nextjs Typescript项目中扩展bootstrap实用程序类

npm install bootstrap@5.1.3
npm install @popperjs/core
npm install jquery

@import '~bootstrap/dist/css/bootstrap.min.css';

/* 添加你的自定义样式 */
/* 示例：修改按钮颜色为红色 */
.btn-danger {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

import 'bootstrap/dist/css/bootstrap.min.css';
import styles from '../styles/custom-bootstrap.module.css';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <div className={styles.myApp}>
      <Component {...pageProps} />
    </div>
  );
}

export default MyApp;

import styles from '../styles/custom-bootstrap.module.css';

function MyComponent() {
  return (
    <button className={`btn btn-danger ${styles.myButton}`}>
      扩展的按钮
    </button>
  );
}