Реагировать на стили пользовательских компонентов

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

Чтобы ответить на бонусную часть вашего вопроса, вы можете передать все, что вы хотите, между <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>
);

Answer 2

Я думаю, вы также должны использовать className в качестве опоры для LNLink. И children, чтобы получить все, что находится внутри тега.

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

export default LNLink;

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

Answer 3

Хорошо, я понял, проблема в том, что я не использую стиль, переданный компоненту, исправление просто, просто добавьте this.props.className в качестве стиля для компонента, поэтому в моем LNLink.js я исправилclassName выглядит следующим образом:

className={classNames(styles.LNLink, this.props.className)}

Теперь я использую пакет classNames, потому что он выглядит чище, так как я использую модули CSS, но если выВы не можете набрать его следующим образом:

className={`${styles.LNLink} ${props.className`}