javascript - 如何在 React 中设置类的样式

Question

我是 react 新手，目前正在尝试复制 Netflix 登陆页面，但要符合我的口味。 因此，对于组件中的样式，我使用 styled-components。

问题是我创建了一个signIn-btn类并使用样式组件对其应用样式。 因此 VS code 会生成此错误

样式组件版本: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;
`;