---
# System prepended metadata

title: Styling React Components

---

# Styling React Components

React CSS inline Style

```jsx=
function App() {
    return (
        <>
            {/* simple string style */}
            {/* wrong method */}
            <h1 style="color: #f00;">Welcome</h1>

            {/* {} say dynamic */}
            {/* correct */}
            <h2 style={{ color: "#f00" }}>Hack md</h2>
        </>
    )
}
```

agar kisi folder main index.js file hai tab ye path hoga

import Footer from "./Footer";

otherwise ye path hoga

import Header from "./Header/Header";

kyonki compiler sochta hai ki folder main index.js file hai per agar hum nahi dete tab file ka naam Header file ka path dena hota hai

const mystyle={
    color:'red',
    background:'blue',
    border-radius:2px,
}
<button style={mystyle}>submit</button>
