React component styled with CSS nesting

ChangeName.css

/* 
**  Note the use of CSS nesting. Nesting all styles underneath a class of
**  ChangeName ensures they will ONLY be seen in the ChangeName component.
**  🙌 This is the best of both worlds!
*/
.ChangeName {
  border: 1px solid var(--dark1);
  padding: 10px;

  &>div {
    margin: 10px;

    &>label {
      display: block;
    }

    &>input {
      font-size: 1.1em;
      display: block;
    }
  }

  &>button {
    color: var(--light1);
    background-color: var(--dark1);
  }
}

ChangeName.jsx

// 🙌
// Back to simple! The only change is adding a className to the root and
// importing the CSS file.

import './ChangeName.css';
export const ChangeName = ({ user, update, save }) => {
  return (
    <section className="ChangeName">
      <div>
        <label htmlFor="user">User name</label>
        <input id="user" onChange={e => update(e.target.value)} value={user} />
      </div>
      <button onClick={save}>Save</button>
    </section>
  )
}