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>
  );
};

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

但是渲染的按钮应用了这种样式：

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

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