className
y aplicas estilos a la clase en tu hoja de estilo. Otra opción es aplicar estilos en línea , que son muy comunes en el desarrollo de ReactJS. Usted aplica estilos en línea a elementos JSX similares a cómo lo hace en HTML, pero con algunas diferencias JSX. Aquí hay un ejemplo de un estilo en línea en HTML: <div style="color: yellow; font-size: 16px">Mellow Yellow</div>
elementos JSX usan el atributo de style
, pero debido a la forma en que se transpila JSX, puede 't establecer el valor a una string
. En su lugar, lo establece igual a un object
JavaScript. Aquí hay un ejemplo: <div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div>
¿Observa cómo la propiedad "fontSize" está en camelCase? Esto se debe a que React no aceptará claves de kebab en el objeto de estilo. React aplicará el nombre de propiedad correcto para nosotros en el HTML. style
al div
en el editor de código para darle al texto un color rojo y un tamaño de fuente de 72px. Tenga en cuenta que, opcionalmente, puede configurar el tamaño de fuente como un número, omitiendo las unidades "px", o escribirlo como "72px". div
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return mockedComponent.children().type() === "div"; })(), "The component should render a div
element.");'
- text: El elemento div
debe tener un color red
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return mockedComponent.children().props().style.color === "red"; })(), "The div
element should have a color of red
.");'
- text: El elemento div
debe tener un tamaño de fuente de 72px
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return (mockedComponent.children().props().style.fontSize === 72 || mockedComponent.children().props().style.fontSize === "72" || mockedComponent.children().props().style.fontSize === "72px"); })(), "The div
element should have a font size of 72px
.");'
```