Weitere ähnliche Inhalte
Ähnlich wie React js t8 - inlinecss (20)
Mehr von Jainul Musani (20)
Kürzlich hochgeladen (20)
React js t8 - inlinecss
- 1. ReactJs : Tutorial-08-CSS in ReactJs
Working with Inline CSS in ReactJS
addstyle.jsx
import React from 'react';
import ReactDOM from 'react-dom';
const h1Style = {
color: 'red'
};
function Hello(props) {
return <h1 style={h1Style}>
{props.msg}
</h1>;
}
const Hello_comp = <Hello msg="Hello,
RTDL Tutorials!"/>;
export default Hello_comp;
import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx'
;
ReactDOM.render(
Hello_comp,
document.getElementById('root')
);
Working with External CSS in ReactJS
style.css
.h1tag {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>ReactJS Demo</title>
<link href="/css/style.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<div id = "root"></div>
<script src = "out/script.min.js"></script>
</body>
</html>
- 2. ReactJs : Tutorial-08-CSS in ReactJs
addstyle.jsx
import React from 'react';
import ReactDOM from 'react-dom';
let classforh1 = 'h1tag';
function Hello(props) {
return <h1 className={classforh1}>
{props.msg}
</h1>;
}
const Hello_comp = <Hello
msg="Hello,
RTDL Tutorials!" />
;
export default Hello_comp;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx
';
ReactDOM.render(
Hello_comp,
document.getElementById('root')
);
