如何使用CSS模块从Bootstrap类编写？

Question

我正在使用create-react-app和Bootstrap，并且正在尝试实现CSS模块。因此，我有一个输入，我想使用Bootstrap中的.form-control和CSS模块中的类.input设置样式。

MyComponent.js：

import React from 'react';
import styles from './counter.module.css'

const MyComponent = (props) => (
    <input type="text" className={styles.input} />
  );

counter.module.css：

.input {
  composes: form-control from "./bootstrap.min.module.css";
  text-align: center;
}

一切似乎都很好，除了它不起作用：仅应用我在.input中定义的样式。

bootstrap.min.module.css只是带有.module的普通Bootstrap文件，也许这就是为什么它不起作用的原因？有没有办法使它起作用？

Answer 1

尝试一下

import React from 'react';
import styles from './counter.module.css';

const MyComponent = (props) => (
  <input type='text' className={`${styles.input} form-control`} />
);