0
248
VisualizaçõesJavascript reactJs css en javascript en un archivo externo
Estoy usando reactjs e intento obtener css dentro de javascript y finalmente leo el css desde un archivo js externo.
Aquí está el código:
import React from 'react'; import ReactDOM from 'react-dom'; var styles = { container: { padding: 20, border: '5px solid green', borderRadius: 2 } }; var myComponent = React.createClass({ render: function() { return ( <div style={styles.container}> {this.props.name} </div> ); } });Esto funciona bien, pero lo que debo hacer es poner el css en un archivo externo. Así que he creado un archivo llamado general.css.js
Y traté de importarlo:
import styles from './components/general.css';Agrego esta importación a la parte superior de la página con las otras importaciones.
El problema es que no está leyendo los estilos.
¿Qué estoy haciendo mal aquí?
3 Respostas
Responde à pergunta0
Cree un nuevo archivo y coloque este código en él.
export const style = { container : { padding: 20, border: '5px solid green', borderRadius: 2 } };Ahora en su archivo de componentes.
import * as styles from './style/location/filename'Ahora puede usar estilos en su función de renderizado.
return ( <div style={styles.style.main}> <h3 style={styles.style.header}>Vote for your favorite hack day idea</h3> </div> );0
Puede importar directamente su archivo css en js.
import './style/app.css';
app.css
.page { background-color:#fafafa; }
y puede usar esta clase en el componente React como se muestra a continuación.
<div className="page">
¡¡¡¡Espero que funcione!!!!
0
Hay una pequeña herramienta que automatiza la traducción de CSS a la representación JSON.
Vale la pena comprobarlo.
Observe cómo la traducción agrega _ guiones bajos:
div.redcolor { color:red; } div:hover { color:blue; }En:
{"div_redcolor":{"color":"red"},"div_hover":{"color":"blue"}}Tenga en cuenta cómo Vishwas Chauhan usó el método destacado de exportación de importación ES6:
En caso de que use esta herramienta, obtiene un objeto grande y puede usar cualquier método.