Desde con ClassName con Css importado en el html
import React from 'react';
const DottedBox = () => (
<div className="DottedBox">
<p className="DottedBox_content">Get started with CSS styling</p>
</div>
);
export default DottedBox;
en el html tenemos que importar el .css
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="./DottedBox.css">
</head>
<body>...</body>
</html>
Desde Css en JSX
import React from 'react';
import './DottedBox.css';
const DottedBox = () => (
<div className="DottedBox">
<p className="DottedBox_content">Get started with CSS styling</p>
</div>
);
export default DottedBox;
Estilo inline en el JSX
import React from 'react';
const divStyle = {
margin: '40px',
border: '5px solid pink'
};
const pStyle = {
fontSize: '15px',
textAlign: 'center'
};
const Box = () => (
<div style={divStyle}>
<p style={pStyle}>Get started with inline style</p>
</div>
);
export default Box;
o también
<div style={{color: 'pink'}} >
En módulos CSS
import React from 'react';
import styles from './DashedBox.css';
const DashedBox = () => (
<div className={styles.container}>
<p className={styles.content}>Get started with CSS Modules style</p>
</div>
);
export default DashedBox;
DashedBox.css
:local(.container) {
margin: 40px;
border: 5px dashed pink;
}
:local(.content) {
font-size: 15px;
text-align: center;
}
Ver articulo: https://medium.com/@pioul/modular-css-with-react-61638ae9ea3e
Con la librería Styled-components
import React from 'react';
import styled from 'styled-components';
const Div = styled.div`
margin: 40px;
border: 5px outset pink;
&:hover {
background-color: yellow;
}
`;
const Paragraph = styled.p`
font-size: 15px;
text-align: center;
`;
const OutsetBox = () => (
<Div>
<Paragraph>Get started with styled-components</Paragraph>
</Div>
);
export default OutsetBox;
Deja un comentario