DEV Community

loading...

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

stereobooster profile image
stereobooster Author

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}`,
  },
Enter fullscreen mode Exit fullscreen mode

(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;
  }
`
Enter fullscreen mode Exit fullscreen mode

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`
Enter fullscreen mode Exit fullscreen mode