Portomaior

Software y Tecnología

You are here: Home / Programación / Modos de aplicar estilos en React JS

Modos de aplicar estilos en React JS

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;