How to give padding to items from parent in react

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

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.

Answer 2

add margin to buttons

button { margin: 0 5px; }