Scribd
Upload
4 views5 pages

Class and Functional Components Using CSS

The document provides examples of using internal, inline, and external styles in React components, both for functional and class components. It includes code snippets demonstrating each styling method, with specific styles applied to headings. Additionally, it references an external CSS file that defines styles for a class named 'main'.

Uploaded by

saniyasanu7635
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views5 pages

Class and Functional Components Using CSS

The document provides examples of using internal, inline, and external styles in React components, both for functional and class components. It includes code snippets demonstrating each styling method, with specific styles applied to headings. Additionally, it references an external CSS file that defines styles for a class named 'main'.

Uploaded by

saniyasanu7635
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Internal Style Sheet-Function Component

import React from 'react'


function CSScomp1() {
const styles={
backgroundColor:'Red',
color:'white',
width:'300px',
height:'300px',
transform:'translate(-50%,-50%)',
position:'absolute',
top:'50%',
left:'50%'
}
return (
<div>
<h1 style={styles} >Internal Stylesheet using CSS</h1>
</div>
)
}

Inline Styles using Function Component


import React from 'react'
function CSScomp1() {
return (
<div>
<h1 style={{

backgroundColor:'Red',
color:'white',
width:'300px',
height:'300px',
transform:'translate(-50%,-50%)',
position:'absolute',
top:'50%',
left:'50%'

}} >Inline Stylesheet using Function Component</h1>


</div>
)
}

export default CSScomp1


External Styles using Function Component

import React from 'react'


import '../CSS/styles.css'
function CSScomp1() {
return (
<div>
<h1 className='main'>External Stylesheet using Function Component</h1>
</div>
)
}

export default CSScomp1

styles.css
.main {
color: blue;
text-align: center;
margin-top: 50px;
font-size: 28px;
border: 2px solid green;
padding: 20px;

background-color: yellow;
}
Internal Style sheet-Class Component

import React from "react";


const styles={
backgroundColor:'Red',
color:'white',
width:'300px',
height:'300px',
transform:'translate(-50%,-50%)',
position:'absolute',
top:'50%',
left:'50%'
}
class Classcomp extends React.Component
{

render(){
return(
<h1 style={styles}>This is Simple Class Component using Internal
CSS</h1>
)
}
}
export default Classcomp
Inline Style sheet using -Class component
import React from "react";

class Classcomp extends React.Component


{

render(){
return(
<h1 style={{
backgroundColor:'green',
color:'white',
width:'300px',
height:'300px',
transform:'translate(-50%,-50%)',
position:'absolute',
top:'50%',
left:'50%'

}}>This is Simple Class Component using Internal CSS</h1>


)
}
}
export default Classcomp
External Style Sheet using Class Component
import React from "react";
import '../CSS/styles.css'
class Classcomp extends React.Component
{

render(){
return(
<h1 className='main'>This is Simple Class Component using External
CSS</h1>
)
}
}
export default Classcomp

styles.css
.main {
color: blue;
text-align: center;
margin-top: 50px;
font-size: 28px;
border: 2px solid green;
padding: 20px;

background-color: yellow;
}

You might also like