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

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

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

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 }

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