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

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

0 голосов
/ 29 января 2020

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

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>

Ответы [ 3 ]

0 голосов
/ 29 января 2020

Это было все, что я мог найти в styled-components FAQ

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

Другой тип - Dynami c, что означает, что он будет отличаться для каждого элемента вашего стилизованного компонента с разными реквизитами, в зависимости от того, что результат интерполяции. Вероятно, он будет выглядеть как .fVOeaW (обратите внимание на отсутствие префикса "s c".)

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

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

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

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

0 голосов
/ 29 января 2020

В настоящее время стилевые компоненты используют алгоритм MurmurHa sh для создания уникального идентификатора, а затем преобразуют число ha sh в имя alphabeti c.

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

const className = hash(componentId + evaluatedStyles);

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

0 голосов
/ 29 января 2020

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

...