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

Your question is unanswerable because you didn't include all of the code. The error is a syntax error, which we can't help with because we don't have the full code of the file. — mattbasta
– mattbasta, Commented Mar 5, 2020 at 5:02
You've got an extra 2 backticks at the end of HeaderComponent's definition, and missing a semicolon after transition: background 0.2s ease-in — Tim
– Tim, Commented Mar 5, 2020 at 5:50

Vishnu · Accepted Answer · 2020-03-05 06:04:29Z

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

answered Mar 5, 2020 at 6:04

Vishnu

1,7311 gold badge17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anglesvar · Accepted Answer · 2020-03-05 05:11:09Z

0

The one which you used is not a styled-component. Check https://styled-components.com/docs/basics to learn about React Styled-Components. Instead, You can create a CSS file with your component and try it as the same way we import a CSS file.

Component.js

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

component.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
}

answered Mar 5, 2020 at 5:11

Anglesvar

1,1549 silver badges18 bronze badges

2 Comments

andriusain Over a year ago

I favour this solution over styled components because with styled components you cannot reuse CSS classes across your application's context. They are just as good as inline styles and sorry but CSS is not broken and it is actually quite useful! I would actually have a traditional stylesheet that is not tightly coupled to any component

SMAmmar14 Over a year ago

Well, I was following a youtube tutorial. There the guy used it and it was working perfectly fine.

Collectives™ on Stack Overflow

How to style classes in React

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related