• Skip to main content
  • Skip to primary sidebar

Portomaior

Software y Tecnología

  • Inicio
  • Blog
  • Contacto
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;

Filed Under: Programación Tagged With: css, ReactJs, Style

Reader Interactions

Comments

  1. Rodolfo says

    22 agosto, 2020 at 9:46 pm

    Hola, quiero saber como aplicar un estilo al atributo Placeholder de un formulario o a cualquier otro atributo similar en React, o sea, me refiero a un atributo lo que está dentro de un elemento, ya que he probado muchas maneras y fue en vano. Puedes orientarme?

    Un saludo y gracias de antemano!

    Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Primary Sidebar

Categorías

  • Comercio Electrónico
  • Diccionario de Informática
  • Diccionario de Marketing
  • Diccionario SEO
  • Diseño Web
  • Docker
  • Genesis Theme para Wordpress
  • Gestión de Proyectos
  • Guías Clientes
  • Hosting
  • Java
  • Linux
  • Mac
  • Odoo
  • Podcast
  • Portfolio
  • Posicionamiento SEO
  • Programación
  • React
  • Sin categoría
  • webmin
  • Windows
  • Woocommerce
  • Wordpress

Entradas recientes

  • Alternativa Windows a CCurl >> bitsadmin
  • Spring Framework de Java (redirec GKB)
  • Chuleta de Expresiones regulares. (redirec GKB)
  • Eclipse IDE
  • Java (chuleta) (redirec GKB)

Copyright © 2023 · portomaior.com · Legal · Política de Cookies · Política de privacidad · Log in