EmotionJS - React - 全局样式覆盖组件特定样式

Question

我有一个全局样式定义如下：

    <Global
      styles={{
        'div[role=button]': {
          backgroundColor: 'black',
          fontSize: '10px',
          textAlign: 'center',
        },
      }}
    />

和一个按钮定义为：

const Button = ({ children, backgroundColor, textColor, textColorHover }) => {
  const style = {
    'padding': '32px',
    'fontSize': '24px',
    'borderRadius': '4px',
    'textAlign': 'center',
    'color': textColor,
    '&:hover': {
      color: textColorHover,
    },
  };

  if (backgroundColor) {
    style.backgroundColor = backgroundColor;
  }

  return (
    <div role="button" css={style}>
      {children}
    </div>
  );
};

我的期望是，如果我传递 backgroundColor 的 blue，按钮实际上是蓝色的，字体大小为 24px。基本上，我希望特定于组件的样式优先于全局样式。

但是呈现的按钮应用了这种样式：

我错过了什么？我可以在 head 中看到全局规则是带有 style 的 date-emotion=css-global 标记。

我知道规则更具体，但我想知道如何覆盖全局样式？否则，我想改用 ThemeProvider。