Как прикрепить стиль компонента стиля к реквизитам компонента className?

Question

Привет, ребята, я создал компонент реакции.таким образом, я мог бы легко прикрепить стиль CSS к своему компоненту через className = "some_style"

, но как мне прикрепить свой стилизованный компонент к этим реквизитам className.

скажем, как

<Component className="styled_component" />

я не знаю, какой подход я собираюсь использовать?Спасибо

Answer 1

При использовании стилевых компонентов вам больше не нужно использовать опору className для ваших компонентов.Допустим, у вас есть div, который вы хотите стилизовать.Сначала объявите div как стиль-компонент.

const StyledDiv = styled.div`
   background-color: blue;
`

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

return(
   <StyledDiv />
)

Затем div будет отображаться с приложенным к нему css, вам не нужно взаимодействовать с className.

Answer 2

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

const Component = styled.div.attrs({
  className: '[add your classes here]'
})

Answer 3

Ну, вы не можете, потому что вы не знаете, к какому классу будет скомпилирован ваш css-in-js.Стилизованный компонент помогает вам написать CSS конкретного компонента в JS.Вы можете попробовать написать CSS <Component /> в файле Component.js.Если класс CSS можно использовать повторно, создайте общий файл CSS и включите его в index.js / App.js