Почему я не могу использовать атрибут className для некоторых React.Components?

Question

Класс стиля CSS работает здесь:

<span className="cake">Cake</span>

Однако, это терпит неудачу (хорошо, никакие изменения стиля не замечены в браузере):

<Nav.Link href="/xyz" className="cake">Cake</Nav.Link>

Почему className атртибуте только работать иногда?

Как добавить пользовательский стиль к <Nav.Link> с, например, вправо, чтобы оправдать только выход из системы?

Answer 1

Будет ли этот стиль выбран браузером или нет, зависит от того, как определяется Nav.Link.

Например, если он определен следующим образом (с использованием styled-components):

const NavLink = styled.div`
  /* some styles */
`;

это будет работать, потому что все реквизиты передаются div.

Однако, если он определен так:

const NavLink = ({ href, children }) => {
  return <a href={href}>children</a>;
};

он проглотит className.

Как правило, хорошей практикой является передача всех дополнительных подпорок по иерархии следующим образом:

const NavLink = ({ href, children, ...rest }) => {
  return <a href={href} {...rest}>children</a>;
};

Но мы никогда не знаем, как это определено. (Вам лучше проверить определение в node_modules.)