React component styled with inline styles

ChangeName_styled.jsx

// 💩
// Much more complex; see all the "style={styles.whatever}"? They get in the way
// of quickly understanding what's in this component.

export const ChangeName = ({ user, update, save }) => {
  return (
    <section style={styles.wrapper}>
      <div style={styles.formGroup}>
        <label htmlFor="user" style={styles.label}>User name</label>
        <input id="user" onChange={e => update(e.target.value)} value={user} />
      </div>
      <button style={styles.button} onClick={save}>Save</button>
    </section>
  )
}

// And the rules of CSS largely don't apply any more. It's no longer possible 
// to apply styles based on position, or relation, or to use pseudo-classes.
// Yuck!

const styles = {
  wrapper: {
    border: "1px solid var(--dark1)",
    padding: "10px",
  },
  formGroup: {
    margin: "10px",
  },
  label: {
    display: "block",
  },
  input: {
    fontSize: "1.5em",
    display: "block",
  },
  button: {
    color: "var(--light1)",
    backgroundColor: "var(--dark1)",
  },
}