Случайные классы отображаются, когда мы используем стилизованные компоненты?

Использую стилизованные компоненты в React. Всякий раз, когда я пишу стили в стилизованном компоненте и если загружаю приложение в браузере, я получаю случайное имя класса на вкладке элементов инструментов разработчика. Я просто хочу знать, что происходит за кулисами?

const Button = styled.a`
 display: inline-block;
 border-radius: 3px;
 padding: 0.5rem 0;
 margin: 0.5rem 1rem;
 width: 11rem;
 background: transparent;
 color: white;
border: 2px solid white;
`

render(
 <div>
  <Button
  href="https://github.com/styled-components/styled-components"
  target="_blank"
  rel="noopener"
  primary
>
  GitHub
</Button>
<Button as={Link} href="/docs">
  Documentation
</Button>

)

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

<a
  href="https://github.com/styled-components/styled-components"
  target="_blank"
  rel="noopener"
  class = "sc-jDwBTQ "
>
  GitHub
</a>

reactjs javascript css styled-components css-in-js
person John_ny    schedule 29.01.2020    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Это было все, что я смог найти в стилизованных компонентах Часто задаваемые вопросы

Каждый узел фактически имеет два связанных с ним класса: один является статическим для каждого компонента, что означает, что каждый элемент стилизованного компонента имеет этот класс. К нему не привязан какой-либо стиль. Вместо этого он используется для быстрого определения того, к какому стилизованному компоненту принадлежат объекты DOM, или для внесения незначительных изменений в DevTools. Он также используется для селекторов компонентов. Статический класс, вероятно, будет выглядеть примерно так: .sc-fVOeaW.

Другой — динамический, то есть он будет отличаться для каждого элемента вашего стилизованного компонента с разными реквизитами в зависимости от результатов интерполяции. Вероятно, он будет выглядеть как .fVOeaW (обратите внимание на отсутствие префикса «sc»).

Например, стилизованный компонент <Button /> каждый раз будет отображаться с одним и тем же статическим классом. Если изменить стили с помощью интерполяций, например <Button secondary />, то динамический класс будет другим, а статический класс останется прежним.

Кроме того, Мотивация

Отсутствие ошибок в именах классов: styled-components генерирует уникальные имена классов для ваших стилей. Вам никогда не придется беспокоиться о дублировании, перекрытии или орфографических ошибках.

TL;DR Они автоматически генерируются и поддерживаются styled-components.

person Drew Reese    schedule 29.01.2020
comment
Привет, можем ли мы применить какое-либо регулярное выражение, чтобы узнать, есть ли у элемента Html классы стилизованных компонентов или нет? - person shuboy2014; 07.06.2021
comment
и атрибут класса элемента Html всегда начинается со статического класса, а затем с динамического класса? - person shuboy2014; 07.06.2021
comment
@ shuboy2014 shuboy2014 Кажется, вы можете сделать сильное предположение на основе статического имени класса, что компонент является стилизованным компонентом (то есть префиксом пространства имен sc-), но я не думаю, что вам следует полагаться на это, поскольку это может измениться в любое время (хотя маловероятно) или может возникнуть конфликт пространства имен с другой внешней библиотекой. Styled-components делает предоставляет утилиту isStyledComponent, помогающую идентифицировать стилизованные компоненты. - person Drew Reese; 07.06.2021

arrow_upward
2
arrow_downward

В настоящее время styled-components использует алгоритм MurmurHash для создания уникального идентификатора, а затем преобразует хеш-номер в буквенное имя.

Каждый экземпляр компонента с уникальными реквизитами имеет собственное имя класса CSS, которое генерируется с помощью алгоритма MurmurHash, идентификатора компонента и строки оцениваемых стилей:

const className = hash(componentId + evaluatedStyles);

Затем это имя класса сохраняется в состоянии компонента как generateClassName.

person RPG    schedule 29.01.2020

arrow_upward
0
arrow_downward

Вы случайно не используете Material UI для reactjs? Если это так, просто проверьте в package.json сведения о версии. Если к этой версии добавлено «rc», то, пожалуйста, обновите ее до предыдущей/следующей стабильной версии.

person Shwetha Padmanabhan    schedule 29.01.2020