• 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
  • Chuleta de Expresiones regulares.
  • Eclipse IDE
  • Java (chuleta)

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

Utilizamos cookies propias y de terceros para ofrecer nuestros servicios, recoger información estadística e incluir publicidad. Si continua navegando acepta su instalación y uso. Aceptar Leer más
Política de Privacidad y Cookies

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necesarias
Siempre activado

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

No necesarias

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.