React Custom Component Styling

Question

所以我为一个经常使用的路由器链接创建了一个自定义组件，这是它的JS文件外观：

import { Link } from "react-router-dom";

import styles from "./LNLink.module.css";

class LNLink extends Component {
  render() {
    return (
      <Link className={styles.LNLink} to={this.props.to}>
        {this.props.text}
      </Link>
    );
  }
}

export default LNLink;

例如，现在在我的Login.js中调用此组件，如下所示：

            <LNLink
              to="/sign-up"
              text="Sign up"
              className={styles.loginSignUpLink}
            />

现在这一切在功能上都可以正常工作，问题是在Login.js中分配的类className={styles.loginSignUpLink}没有被分配，未被分配和覆盖，它们根本不在浏览器检查中，为什么是这种情况？

奖励问题：代替传递text道具，是否有可能在<LNLink>和结束标记之间发送它，并以相同的方式使用它？

非常感谢

Answer 1

导入常规css文件时，您应该引用实际的类名，因为所有样式表的作用域都是全局范围的

内部foo.css

.foo { color : red; }    

在组件内部

import foo from './foo.css'

const Component = () => <div className='foo' />