How to style classes in React

Question

I am new to react and am currently trying to replicate Netflix landing page, but with my taste. So for styling in components, I am using styled-components.

The problem is that I have created a signIn-btn class and applying styles to it using styled-components. Therefore VS code is generating this error

styled-component version: 5.0.1

Line 24:36: Parsing error: Unterminated template

This is the code for my styled component:

      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

I think you don't have to add the class name on the HeaderComponent. Try:

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;
`;