css - react - style in jsx

Reaccionar error de etiqueta de estilo JSX en Render

Question

Esta es mi función render render reaccionar: function () {

  return (
          <div>
                <p className="rr">something</p>


                  <style>
                    .rr{
                      color:red;
                    }
                  </style>
          </div>    
        )
}

Esto me da este error "JSX: Error: Error de análisis: Línea 22: Token inesperado:"

¿Qué pasa aquí? ¿Puedo incrustar css normal completo en un componente de reacción?

Answer 1

1. Crear una función para manejar la inserción de la etiqueta de estilo.
2. Agregue el CSS que desea a una variable de cadena.

3. Agregue la variable al JSX devuelto dentro de su etiqueta <style> .

   renderPaypalButtonStyle() {
       let styleCode = "#braintree-paypal-button { margin: 0 auto; }"
       return (
           <style>{ styleCode }</style>
       )
   }

Answer 2

"clase" es una palabra reservada en JavaScript. En su lugar, utilice "className".

Además, debes recordar que estás utilizando JSX, no HTML. No creo que jsx analice tus etiquetas. Un mejor enfoque es crear un objeto con sus estilos y luego aplicarlo como estilo (ver más abajo).

var styles = {
  color:"red";
}

return (
  <div>
    <p style={styles}>something</p>
  </div>    
)

Answer 3

Esto es lo que hice:

  render(){
    var styleTagStringContent = 
    ".rr {"+
       "color:red"+
    "}";
    return (
      <style type="text/css">
        {styleTagStringContent}
      </style>
    );

Answer 4

Esto se puede hacer usando el backtick "` "como se muestra a continuación

return (<div>
        <p className="rr">something</p>


          <style>{`
            .rr{
              color:red;
            }
          `}</style>
  </div>)

Answer 5

Fácil de hacer con las cadenas de plantillas de es6 (que permiten saltos de línea). En tu método de renderizado:

const css = `
    .my-element {
        background-color: #f00;
    }
`

return (
    <div class="my-element">
        <style>{css}</style>
        some content
    </div>
)

En cuanto al caso de uso, estoy haciendo esto para un div con algunas casillas de verificación que estoy usando para la depuración, que me gustaría incluir dentro de un archivo para su fácil eliminación más adelante.

Answer 6

JSX es solo una pequeña extensión de javascript, no es su propio lenguaje de plantillas. Así lo harías como en javascript:

        return (<div>
            <p className="rr">something</p>


              <style>{"/
                .rr{/
                  color:red;/
                }/
              "}</style>
      </div>)

http://jsfiddle.net/r6rqz068/

Sin embargo, no hay absolutamente ninguna buena razón para hacer esto.

Answer 7

Los estilos en línea se aplican mejor directamente a la plantilla JSX del componente:

return (
  <div>
    <p style={{color: "red"}}>something</p>
  </div>
);

DEMO: http://jsfiddle.net/chantastic/69z2wepo/329/

Nota: JSX no admite la sintaxis HTML para el atributo de estilo

Declarar propiedades al usar los nombres de propiedad de camelCase, por ejemplo,

{ color: "red", backgroundColor: "white" }

Más información aquí: http://facebook.github.io/react/tips/inline-styles.html