Customizing components

[bitter tapir]

Is this the right approach to customize components, I'm asking because it doesn't work until I put the !important keyword.

// other fields in components prop of the THEME
  ActionIcon: ActionIcon.extend({
    classNames: {
      icon: styles.actionIconIcon,
    },
  }),

CSS

.actionIconIcon {
  width: rem(20px) !important;
  height: rem(20px) !important;
}

[summer galleon]

Use default props and set size there instead, or use styles and make sure that the import order is correct, if that does not work, change styles imports to layers