Discussion on: Stop choosing DX over UX. Or maybe not?

View post

Replies for: You've removed the hover and focus styles, and left in a comment from the original React example that warns about making sure they get set correctl...

You've removed ... focus styles,

":focus-visible": {
    "box-shadow": inset
      ? `inset 0 0 0 3px ${color}`
      : `0 0 0 2px #fff, 0 0 0 5px ${color}`,
  },

(Safari and IE require polyfill)

You've removed the hover

That is how CSS reset works - everything is removed, developer suppose to provide their own style

const MyButton = styled(BaseButton)`
  border: 1px solid black;
  :hover {
     background: pink;
  }
`

There is even a comment

reset built-in styles of a button https://css-tricks.com/overriding-default-button-styles/

Don't forget to provide styles for:

 - default state
 - `:hover`
 - `:active` (See also https://bugzilla.mozilla.org/show_bug.cgi?id=68851)
 - `:disabled`
 - `:focus-visible`