Как стилизовать классы в React

Question

Я новичок, чтобы отреагировать и сейчас пытаюсь повторить целевую страницу Netflix, но со своим вкусом. Поэтому для стилей в компонентах я использую styled-components.

Проблема в том, что я создал класс signIn-btn и применяю к нему стили, используя styled-components. Поэтому код VS генерирует эту ошибку

версия компонента в стиле: 5.0.1

Строка 24:36: Ошибка синтаксического анализа: неопределенный шаблон

Это код для моего стилизованного компонента:

      render() {
        return (
          <div>
            <HeaderComponent className="header-container">
              <div className="header-top">
                <img src={logo}></img>
                <NavLink className="signIn-btn">Sign In</NavLink>
              </div>
            </HeaderComponent>
          </div>
        );
      }
    }    
    export default Header;    
    //Header  Container
    const HeaderComponent = styled.div`
    .signIn-btn {
    right: 0;
    margin:1.125rem;
    padding: 0.4375rem 1.0625rem;
    font-weight: 400;
    line-height: normal;
    border-radius: 0.1875rem;
    font-size: 1rem;
    background: var(--main-red);
    position: absolute;
    translate: (-50%,-50%);
    cursor: pointer;
    transition: background 0.2s ease-in
    }```

Answer 1

Я думаю, вам не нужно добавлять имя класса на HeaderComponent. Попробуйте:

const HeaderComponent = styled.div`
 right: 0;
 margin:1.125rem;
 padding: 0.4375rem 1.0625rem;
 font-weight: 400;
 line-height: normal;
 border-radius: 0.1875rem;
 font-size: 1rem;
 background: var(--main-red);
 position: absolute;
 translate: (-50%,-50%);
 cursor: pointer;
 transition: background 0.2s ease-in;
`;

Answer 2

Тот, который вы использовали, не является стилевым компонентом. Отметьте https://styled-components.com/docs/basics, чтобы узнать о React Styled-Components. Вместо этого вы можете создать файл CSS с вашим компонентом и попробовать его так же, как мы импортируем файл CSS.

Компонент. js

import React from 'React'
import '../component.css'
...
<button className = signIn-btn"></button>

компонент. css

.signIn-btn {
 right: 0;
 margin:1.125rem;
 padding: 0.4375rem 1.0625rem;
 font-weight: 400;
 line-height: normal;
 border-radius: 0.1875rem;
 font-size: 1rem;
 background: var(--main-red);
 position: absolute;
 translate: (-50%,-50%);
 cursor: pointer;
 transition: background 0.2s ease-in
}