0

Tengo un par de componentes en react que a la hora de cargar los estilos no los carga. El códeigo del componente es el siguiente:

import { Component } from 'react'
import './producto.css'

class Producto extends Component {
  render() {
    const producto = this.props.producto
    return(
      <div className='producto'>
        <img className='img' alt={producto.name} src={producto.img}/>
        <p> {producto.name} </p>
        <p> {producto.price}€ </p>
      </div>
    )
  }
}
export default Producto

Y el código css es este:

.producto {
    border: '1px solid #eee';
    box-shadow: '0px 5px rgb(0, 0, 0, 0.1)';
    width: '30%';
    padding: '10px 10px';
    border-radius: '5px';
}

.img {
    width: '100%';
}

También tengo otro componente con su correspondiente hoja de estilos que tampoco carga.

Edito: Tanto los dos archivos de los componentes como los dos archivos css están al mismo nivel

5
  • ./producto.css verificaste si está bien la ruta del css? el 20 oct. 2022 a las 16:44
  • Sí, la ruta está bien. Y los archivos están al mismo nivel.
    – MoisesMS
    el 20 oct. 2022 a las 16:45
  • Si lo hago de esa manera me da error
    – MoisesMS
    el 20 oct. 2022 a las 16:49
  • No se mucho de react, pero esta lectura te puede servir: es.reactjs.org/docs/faq-styling.html el 20 oct. 2022 a las 16:53
  • No aplica la clase o solo no se ven los cambios? es decir al ver tu componente en el navegador, si le das en inspeccionar elemento si te muestra <div class="producto"> o solo te muestra <div class="">?
    – Sr1871
    el 20 oct. 2022 a las 16:56

2 respuestas 2

0

Todo se ve correcto, en teoría no debería dar problemas, intenta recargar la chache de tu navegador o cerrar y abrir el navegador para ver si los cambios no se aplican, en caso de que no verse cambios aplicados checa tu proyecto, algo esta pasando que esta causando error con la importación de tu hoja de estilos. También podrías probar insertando los estilos directamente en el component con style={{}}

7
  • Ya lo he comprobado y todo está bien. He probado a usar los estilos en linea y funciona sin problemas. De esta manera funciona. const styles = { productos: { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', background: 'red' } } class Productos extends Component { render() { const { productos, agregarAlCarro } = this.props return( <div style={styles.productos}> {productos.map(producto => <Producto agregarAlCarro={agregarAlCarro} key={producto.name} producto={producto} />)} </div> ) } }
    – MoisesMS
    el 20 oct. 2022 a las 16:56
  • @MoisesMS lo que se me ocurre entonces es que en alguna parte de tu proyecto los estilos de la etiqueta <div> o algún componente con la misma clase esta sobrescribiendo los estilos de CSS.
    – Cloud89
    el 20 oct. 2022 a las 16:58
  • El método con el que funciona solo lo hace con la clase productos. En cambio con la clase producto no funciona. No entiendo nada
    – MoisesMS
    el 20 oct. 2022 a las 17:00
  • @MoisesMS prueba usando la propiedad !important en tus estilos, para intentar forzar que se apliquen tus cambios, recuerda recargar tu navegador eliminando la cache para comprobar 100% que algo mas raro esta ocurriendo.
    – Cloud89
    el 20 oct. 2022 a las 17:08
  • También podrías probar importar tus estilos con un modulo de CSS create-react-app.dev/docs/adding-a-css-modules-stylesheet
    – Cloud89
    el 20 oct. 2022 a las 17:10
0

Buen día amigo.

Tenia el mismo problema justo ahora, lo he resuelto encontrándome que en las hojas de estilo, en tu archivo CSS los valores de las propiedades no van encomilladas, me paso el mismo error ya que copie el estilo inline en REACT a un archivo CSS y el IDE no marca como error pero internamente no puede interpretar los estilos encomillados, los toma como sin valores.

Intenta quitando las comillas y no debes tener mayor problema ;)

1
  • Intenta ser más claro y conciso. Estructura mejor tus frases y omite aquellos datos que no aporten valor a la respuesta. Gracias. el 4 abr. a las 11:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.