How to give padding to items from parent in react - css

Question

I'm using css-module to style react , i have a css file like this
.button-style {
flex-direction: row;
padding: 10px;
}
And an simple react file like this
import React from "react"
import { useEffect, useState, useCallback, useMemo } from "react"
import style from "./styleHook.module.css"
export default function TestEffect() {
const [count, setCount] = useState(1)
const [color, setColor] = useState("black")
const increaseCount = () => setCount(count + 1)
const double = (count: number) => count * 2
const changeColor = (color: string) => {
console.log("uh oh,this will re-render")
color === "black" ? setColor("blue") : setColor("black")
}
useEffect(() => {
console.log("hey count just change and i show up")
}, [count])
return (
<div>
<h1>Value of double count : {count}</h1>
<h2 style={{ color: color }}>This text have {color} color!</h2>
<div className={style['button-style']}>
<button
onClick={() => {
setCount(count + 1)
}}
>
Change value
</button>
<button
onClick={() => {
changeColor(color)
}}
>
Change color
</button>
<button onClick={increaseCount}>Increase count by 1</button>
</div>
</div>
)
}
Now i want to give some space between button, but don't know how but it give padding for parent instead of child, come from react-native and i feel like it not work like react-native
Please help, here is the codesandbox demo
Demo

Answer 1

add margin to buttons
button {
margin: 0 5px;
}

Answer 2

You can put these buttons into a div and apply grid property on that div.
Like this
<div style={{display:'grid', gridTemplateColumns:'repeat( auto-fit,minmax(250px, 1fr)', gap:'10px'}}>
<button1>1</button1>
<button2>2</button1>
<button3>3</button1>
</div>
Now they are responsive as well.