Inline style

The basic idea is to setup a JavaScript object either with let or const, and then apply it inside the tag with style={…}. It is import to note that we are using sudo DOM, and the style property names are changed from kebab-case (using hyphen-separated) to camelCase (using big letter to separated with the first letter begin a small letter.).

The following example shows how to setup an object an than apply to the span, or doing it directly inside the div.

import React from "react";

const ItemComponent = (prop) => {
    const style = {
        borderWidth: '1px',
        borderStyle: 'solid',
        cursor: 'default'

    return (
        <div style={{padding: '5px'}}>
            <span style={style}
                name: {}, price: ${prop.price}, key: {prop.index}</span>

export default ItemComponent;
  • reject/inline_style.txt
  • Last modified: 2020/07/14 09:52
  • by chongtin