样式组件不覆盖背景

Question

下面，Button 的所有属性都将覆盖 PillButton 的属性除了背景。我尝试过 background-color 得到了相同的结果。只有将 !important 添加到 background 才有效。

const { white, darkGrey } = theme.colors;
export const PillButton = styled.button`
  align-items: center;
  background: ${p => (p.selected ? white : darkGrey)};
  border-radius: 25px;
  border: none;
  color: ${p => (p.selected ? darkGrey : white)};
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding: 8px 16px;
  white-space: nowrap;

  :hover {
    background: ${white};
    color: ${darkGrey};
  }
`;

const Button = styled(PillButton)`
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    background: ${p =>
      p.selected ? theme.colors.draftedBlue : theme.colors.midGrey};
    font-family: "Roboto Condensed", sans-serif;
  `;

Why isn't background working?