es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Los estilos de CSS personalizados en react-bootstrap no funcionan.

29 May, 2023 Programación

¿Por qué mis estilos personalizados de CSS no funcionan con react-bootstrap? Uso npx create-react-app, node-sass y npm i react-bootstrap. ¿Qué me falta?

¡Gracias!

Aquí están mis archivos de muestra:

Código de “index.js”:

import “bootstrap/dist/css/bootstrap.min.css”;

/importar aquí/

ReactDOM.render(


,
document.getElementById(“root”)
);

SCSS personalizado:

body {
background: #0b739c;
}

.login-form {
background: white;

h1 {
/estilos aquí/
}

form {
input {
background: #ffffff;
border: 1px solid #dcdcdc;
box-sizing: border-box;
border-radius: 40px;
}
}
}

Código de “login.js”:

import “./Login.module.scss”;
/código aquí/

const Login = () => {
return (

login image

¡Lleva a todos tus amigos a cualquier red!

    <col classname="m-0 login-form">
      /*código del formulario aquí*/

  </row>
</container>

);
};

export default Login;

Salida de ejemplo, los estilos personalizados no se reflejan:

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Una posible razón por la cual tus estilos CSS personalizados no funcionan con react-bootstrap es debido a la especificidad de CSS. React-bootstrap utiliza clases de Bootstrap y, a veces, estas clases tienen una especificidad más alta que tus estilos personalizados, lo que ocasiona que tus estilos sean sobrescritos por los estilos de Bootstrap.

    Para solucionar este problema, puedes aumentar la especificidad de tus estilos personalizados añadiendo una clase padre a tus selectores CSS. Por ejemplo, puedes envolver tus estilos CSS de login-form en una clase padre como esta:

    .login-page {
  body {
    background: #0b739c;
  }

  .login-form {
    background: white;

    h1 {
      /*estilos aquí*/
    }

    form {
      input {
        background: #ffffff;
        border: 1px solid #dcdcdc;
        box-sizing: border-box;
        border-radius: 40px;
      }
    }
  }
}

    Luego, en tu componente de inicio de sesión, agrega la clase login-page al contenedor padre:

    import './Login.module.scss';

const Login = () => {
  return (
    <div classname="login-page">
      <container fluid="">
        <row>
          <col>
            <image src="{LoginImage}" alt="imagen de inicio de sesión"></image>
            <h2>¡Lleva a todos tus amigos a cualquier red!</h2>

          <col classname="m-0 login-form">
            /*código del formulario aquí*/

        </row>
      </container>
    </div>
  );
};

    Esto aumentará la especificidad de tus estilos personalizados y deberían ahora tener efecto y ser visibles en tu interfaz de usuario.

    Además, asegúrate de que tus archivos SCSS se estén compilando en archivos CSS e importándose correctamente en tu archivo index.js. Puedes usar un paquete como node-sass para hacer esto.

    En tu archivo index.js, asegúrate de importar tu archivo SCSS personalizado antes de importar el archivo CSS de react-bootstrap:

    import './index.scss';
import 'bootstrap/dist/css/bootstrap.min.css';

/*otras importaciones*/

Comments are closed.