MDBootstrap es una biblioteca de interfaz de usuario de reacción basada en diseño de materiales y bootstrap que se utiliza para crear páginas web atractivas con su componente sencillo y fácil de usar.
En este artículo, sabremos cómo usar Estilos de colores en ReactJS MDBootstrap. Estilos de colores se utiliza para establecer los colores del componente.
Sintaxis:
<div className="bg-primary">GeeksforGeeks</div>
Creación de la aplicación React e instalación del módulo:
Paso 1: Cree una aplicación React usando el siguiente comando.
npx create-react-app foldername
Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando.
cd foldername
Paso 3: Instale ReactJS MDBootstrap en su directorio dado.
npm i mdb-ui-kit npm i mdb-react-ui-kit
Estructura del proyecto : Se verá como lo siguiente.
Paso para ejecutar la aplicación: ejecute la aplicación desde el directorio raíz del proyecto, utilizando el siguiente comando.
npm start
Ejemplo 1: Este es el ejemplo básico que muestra cómo usar los estilos de color.
App.js
import React from "react";
import { MDBCol, MDBRow, MDBContainer } from "mdb-react-ui-kit";
export default function App() {
return (
<div id='gfg'>
<h2>GeeksforGeeks</h2>
<h4>ReactJS MDBootstrap Colors Styles</h4>
<MDBRow className='mb-4'>
<MDBCol>
<MDBContainer className='text-light example-square
rounded bg-primary'>
Primary Color</MDBContainer>
</MDBCol>
<MDBCol>
<MDBContainer className='text-light example-square
rounded bg-secondary'>
Secondary Color</MDBContainer>
</MDBCol>
<MDBCol>
<MDBContainer className='text-light example-square
rounded bg-success'>
Success Color</MDBContainer>
</MDBCol>
</MDBRow>
<MDBRow className='mb-4'>
<MDBCol>
<MDBContainer className='text-light example-square
rounded bg-danger'>
Danger Color</MDBContainer>
</MDBCol>
<MDBCol>
<MDBContainer className='text-light example-square
rounded bg-warning'>
Warning Color</MDBContainer>
</MDBCol>
<MDBCol>
<MDBContainer className='text-light example-square
rounded bg-info'>
Info Color</MDBContainer>
</MDBCol>
</MDBRow>
<MDBRow className='mb-4'>
<MDBCol>
<MDBContainer className='text-light example-square
rounded bg-dark'>
Dark Color</MDBContainer>
</MDBCol>
<MDBCol>
<MDBContainer className='example-square
rounded bg-light'>
Light Color</MDBContainer>
</MDBCol>
</MDBRow>
</div>
);
}
Producción:
ReactJS MDBootstrap Colores Estilos
Ejemplo 2: En este ejemplo, sabremos cómo agregar texto en un Estilos de color.
App.js
import React from "react";
import { MDBCol, MDBRow, MDBContainer } from "mdb-react-ui-kit";
export default function App() {
return (
<div id='gfg'>
<h2>GeeksforGeeks</h2>
<h4>ReactJS MDBootstrap Colors Styles</h4>
<MDBRow className='mb-4'>
<MDBCol>
<MDBContainer className='text-primary
example-square rounded'>
Primary Color</MDBContainer>
</MDBCol>
<MDBCol>
<MDBContainer className='text-secondary
example-square rounded'>
Secondary Color</MDBContainer>
</MDBCol>
<MDBCol>
<MDBContainer className='text-success
example-square rounded'>
Success Color</MDBContainer>
</MDBCol>
</MDBRow>
<MDBRow className='mb-4'>
<MDBCol>
<MDBContainer className='text-danger
example-square rounded'>
Danger Color</MDBContainer>
</MDBCol>
<MDBCol>
<MDBContainer className='text-warning
example-square rounded'>
Warning Color</MDBContainer>
</MDBCol>
<MDBCol>
<MDBContainer className='text-info
example-square rounded'>
Info Color</MDBContainer>
</MDBCol>
</MDBRow>
<MDBRow className='mb-4'>
<MDBCol>
<MDBContainer className='text-dark
example-square rounded'>
Dark Color</MDBContainer>
</MDBCol>
<MDBCol>
<MDBContainer className='text-light
example-square rounded bg-dark'>
Light Color</MDBContainer>
</MDBCol>
</MDBRow>
</div>
);
}
Producción:
ReactJS MDBootstrap Colores Estilos
Ejemplo 3: En este ejemplo, sabremos cómo agregar enlaces en un estilo de colores.
App.js
import React from "react";
import { MDBCol, MDBRow, MDBContainer } from "mdb-react-ui-kit";
export default function App() {
return (
<div id='gfg'>
<h2>GeeksforGeeks</h2>
<h4>ReactJS MDBootstrap Colors Styles</h4>
<a href='https://www.geeksforgeeks.org/' className='link-primary'>
Primary Coloured link
</a>
<br/>
<a href='https://www.geeksforgeeks.org/' className='link-secondary'>
Secondary Coloured link
</a>
<br/>
<a href='https://www.geeksforgeeks.org/' className='link-success'>
Success Coloured link
</a>
<br/>
<a href='https://www.geeksforgeeks.org/' className='link-danger'>
Danger Coloured link
</a>
<br/>
<a href='https://www.geeksforgeeks.org/' className='link-warning'>
Warning Coloured link
</a>
<br/>
<a href='https://www.geeksforgeeks.org/' className='link-info'>
Info Coloured link
</a>
<br/>
<a href='https://www.geeksforgeeks.org/' className='link-dark'>
Dark Coloured link
</a>
</div>
);
}
Producción:
ReactJS MDBootstrap Colores Estilos
Ejemplo 4: En este ejemplo, sabremos cómo agregar componentes en estilos de colores.
App.js
import React from "react";
import { MDBBadge } from "mdb-react-ui-kit";
export default function App() {
return (
<div id='gfg'>
<h2>GeeksforGeeks</h2>
<h4>ReactJS MDBootstrap Colors Styles</h4>
<MDBBadge color='primary'>Primary Badge</MDBBadge>
<MDBBadge color='secondary' className='mx-1'>
Secondary Badge
</MDBBadge>
<MDBBadge color='success'>Success Badge</MDBBadge>
<MDBBadge color='danger' className='mx-1'>
Danger Badge
</MDBBadge>
<MDBBadge color='warning'>Warning Badge</MDBBadge>
<MDBBadge color='info' className='mx-1'>
Info Badge
</MDBBadge>
<MDBBadge color='light' className="text-dark">
Light Badge
</MDBBadge>
<MDBBadge color='dark' className='ms-1'>
Dark Badge
</MDBBadge>
</div>
);
}
Producción:
ReactJS MDBootstrap Colores Estilos
Referencia: https://mdbootstrap.com/docs/b5/react/content-styles/colors/