React JS 19 Tutorial in Hindi #36 Styled components

  1. What is Styled component
  2. Install styled component package
  3. Import and Apply Styled component
  4. Write style with styled component
  5. Interview Question

Styled Components is a CSS-in-JS library that allows you to write actual CSS code inside your JavaScript or TypeScript files, scoped to individual components

import styled from "styled-components"
function App() {

// const Heading =styled.h1`
// color:red;
// border:1px solid green;
// border-radius:5px;
// margin:20px;
// padding:20px
// `

const Heading=styled.h1({
color:'red',
border:'1px solid green',
borderRadius:'5px',
margin:'20px',
padding:'20px'
})

const StyleBtn=styled.button`
color:red;
width:130px;
height:40px;
margin:20px
`


return (
<>
<h1>Styled Component with React js</h1>
<Heading>Hello Heading</Heading>
<Heading>Hello Heading 2</Heading>
<Heading>Hello Heading 3</Heading>
<Heading>Hello Heading 4</Heading>
<StyleBtn>Login</StyleBtn>
<StyleBtn>Signup</StyleBtn>
<StyleBtn>Bakc</StyleBtn>
<StyleBtn>Login</StyleBtn>


</>
)
}
export default App