javascript - react 自定义组件样式

因此，我为经常使用的路由器链接创建了一个自定义组件，这就是它的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>和结束标记之间发送它，并以相同的方式使用它？

非常感谢

最佳答案

要回答问题的奖励部分，您可以在<LNLink>之间传递任何所需内容，然后使用this.props.children将其呈现在此组件内

<LNLink>Whatever you want here (text, JSX, other components)</LNLink>

return (
      <Link className={styles.LNLink} to={this.props.to}>
        {this.props.children}
      </Link>
);