Componentes con estilo de React: estilos en línea + 3 otros enfoques de estilo CSS (con ejemplos)

No hay una forma correcta de diseñar los componentes de React. Todo depende de qué tan compleja sea su aplicación front-end y con qué enfoque se sienta más cómodo.

Hay cuatro formas diferentes de diseñar la aplicación React, y en esta publicación aprenderá sobre todas ellas. Comencemos con el estilo en línea.

Estilo en línea

Los componentes de React están compuestos por elementos JSX. Pero el hecho de que no esté escribiendo elementos HTML normales no significa que no pueda usar el antiguo método de estilo en línea.

La única diferencia con JSX es que los estilos en línea deben escribirse como un objeto en lugar de una cadena.

Aquí hay un ejemplo simple:

import React from "react"; export default function App() { return ( 

Hello World

); }

En el atributo de estilo anterior, el primer conjunto de corchetes le indicará a su analizador JSX que el contenido entre corchetes es JavaScript (y no una cadena). El segundo conjunto de corchetes inicializará un objeto JavaScript.

Los nombres de propiedades de estilo que tienen más de una palabra se escriben en camelCase en lugar de utilizar el estilo tradicional con guiones. Por ejemplo, la text-alignpropiedad habitual debe escribirse como textAlignen JSX:

import React from "react"; export default function App() { return ( 

Hello World

); }

Como el atributo de estilo es un objeto, también puede separar el estilo escribiéndolo como una constante. De esta manera, puede reutilizarlo en otros elementos según sea necesario:

import React from "react"; const pStyle = { fontSize: '16px', color: 'blue' } export default function App() { return ( 

The weather is sunny with a small chance of rain today.

); }

Si necesita extender su estilo de párrafo más abajo en la línea, puede usar el operador de extensión de objeto. Esto le permitirá agregar estilos en línea a su objeto de estilo ya declarado:

import React from "react"; const pStyle = { fontSize: "16px", color: "blue" }; export default function App() { return (  

The weather is sunny with a small chance of rain today.

When you go to work, don't forget to bring your umbrella with you!

); }

Los estilos en línea son el ejemplo más básico de una técnica de estilo CSS en JS.

Uno de los beneficios de utilizar el enfoque de estilo en línea es que tendrá una técnica de estilo simple centrada en los componentes. Al usar un objeto para diseñar, puede extender su estilo extendiendo el objeto. Luego, puede agregarle más propiedades de estilo si lo desea.

Pero en un proyecto grande y complejo en el que tiene que administrar cientos de componentes de React, es posible que esta no sea la mejor opción para usted.

No puede especificar pseudoclases usando estilos en línea. Eso significa que :hover, :focus, :active, o :visitedsalir por la ventana en lugar del componente.

Además, no puede especificar consultas de medios para un estilo receptivo. Consideremos otra forma de diseñar tu aplicación React.

Hojas de estilo CSS

Cuando create-react-appcreas una aplicación React usando , automáticamente usarás webpack para manejar la importación y el procesamiento de activos.

Lo mejor de webpack es que, dado que maneja sus activos, también puede usar la importsintaxis de JavaScript para importar un .cssarchivo a su archivo JavaScript. Luego puede usar el nombre de la clase CSS en los elementos JSX que desea diseñar, como este:

.paragraph-text { font-size: 16px; color: 'blue'; }
import React, { Component } from 'react'; import './style.css'; export default function App() { return (  

The weather is sunny with a small chance of rain today.

); }

De esta manera, el CSS se separará de sus archivos JavaScript y podrá escribir sintaxis CSS como de costumbre.

Incluso puede incluir un marco CSS como Bootstrap en su aplicación React usando este enfoque. Todo lo que necesita es importar el archivo CSS a su componente raíz.

Este método le permitirá utilizar todas las funciones de CSS, incluidas las pseudoclases y las consultas de medios. Pero el inconveniente de utilizar una hoja de estilo es que su estilo no se adaptará a su componente.

All CSS selectors have the same global scope. This means one selector can have unwanted side effects, and break other visual elements of your app.

Just like inline styles, using stylesheets still leaves you with the problem of maintaining and updating CSS in a big project.

CSS Modules

A CSS module is a regular CSS file with all of its class and animation names scoped locally by default.

Each React component will have its own CSS file, and you need to import the required CSS files into your component.

In order to let React know you’re using CSS modules, name your CSS file using the [name].module.css convention.

Here is an example:

.BlueParagraph { color: blue; text-align: left; } .GreenParagraph { color: green; text-align: right; }
import React from "react"; import styles from "./App.module.css"; export default function App() { return (  

The weather is sunny with a small chance of rain today.

When you go to work, don't forget to bring your umbrella with you!

); }

When you build your app, webpack will automatically look for CSS files that have the .module.css name. Webpack will take those class names and map them to a new, generated localized name.

Here is the sandbox for the above example. If you inspect the blue paragraph, you’ll see that the element class is transformed into _src_App_module__BlueParagraph.

CSS Modules ensures that your CSS syntax is scoped locally.

Another advantage of using CSS Modules is that you can compose a new class by inheriting from other classes that you’ve written. This way, you’ll be able to reuse CSS code that you’ve written previously, like this:

.MediumParagraph { font-size: 20px; } .BlueParagraph { composes: MediumParagraph; color: blue; text-align: left; } .GreenParagraph { composes: MediumParagraph; color: green; text-align: right; }

Finally, in order to write normal style with a global scope, you can use the :global selector in front of your class name:

:global .HeaderParagraph { font-size: 30px; text-transform: uppercase; }

You can then reference the global scoped style like a normal class in your JS file:

Weather Forecast

Styled Components

Styled Components is a library designed for React and React Native. It combines both the CSS in JS and the CSS Modules methods for styling your components.

Let me show you an example:

import React from "react"; import styled from "styled-components"; // Create a Title component that'll render an 

tag with some styles const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; export default function App() { return Hello World!; }

When you write your style, you’re actually creating a React component with your style attached to it. The funny looking syntax of styled.h1 followed by backtick is made possible by utilizing JavaScript’s tagged template literals.

Styled Components were created to tackle the following problems:

  • Automatic critical CSS: Styled-components keep track of which components are rendered on a page, and injects their styles and nothing else automatically. Combined with code splitting, this means your users load the least amount of code necessary.
  • No class name bugs: Styled-components generate unique class names for your styles. You never have to worry about duplication, overlap, or misspellings.
  • Easier deletion of CSS: It can be hard to know whether a class name is already used somewhere in your codebase. Styled-components makes it obvious, as every bit of styling is tied to a specific component. If the component is unused (which tooling can detect) and gets deleted, all of its styles get deleted with it.
  • Simple dynamic styling: Adapting the styling of a component based on its props or a global theme is simple and intuitive, without you having to manually manage dozens of classes.
  • Painless maintenance: You never have to hunt across different files to find the styling affecting your component, so maintenance is a piece of cake no matter how big your codebase is.
  • Automatic vendor prefixing: Write your CSS to the current standard and let styled-components handle the rest.

You get all of these benefits while still writing the same CSS you know and love – just bound to individual components.

If you’d like to learn more about styled components, you can visit the documentation and see more examples.

Conclusion

Many developers still debate the best way to style a React application. There are both benefits and drawbacks in writing CSS in a non-traditional way.

For a long time, separating your CSS file and HTML file was regarded as the best practice, even though it caused a lot of problems.

But today, you have the choice of writing component-focused CSS. This way, your styling will take advantage of React’s modularity and reusability. You are now able to write more enduring and scalable CSS.