在 Material UI 中使用樣式組件應用單選按鈕顏色？

Question

在 Material UI 文檔中，他們提供了示例代碼來展示如何更改單選按鈕的顏色。

const GreenRadio = withStyles({
  root: {
    color: green[400],
    '&$checked': {
      color: green[600],
    },
  },
  checked: {},
})(props => <Radio color="default" {...props} />);

我想用styled-component復制它，即const StyledRadio = styled(Radio)但我不太熟悉與符號和美元符號等語法 - 我該怎么做？

Answer 1

當使用帶有 MUI 的樣式組件時，CSS 將應用於組件的root class。 如果您需要應用更具體的樣式，則需要定位相關的 class。 在這種情況下，您需要定位經過.Mui-checked的 class：

const StyledRadio = styled(Radio)`
  color: ${green[400]};
  &.Mui-checked {
    color: ${green[600]};
  }
`;

MUI 文檔非常好，因為它們列出了每個組件的 CSS 類名。 如果您訪問有關 Radio 組件的 API 文檔，您將看到那里列出的.Mui-checked class（在“全局樣式”列下）。

這是代碼沙箱中的一個工作示例： https://codesandbox.io/embed/styled-components-9pewl

Answer 2

這是適當的樣式組件語法：

const GreenRadio = styled(Radio)`
  color: ${green[400]};
  &.Mui-checked {
    color: ${green[600]};
  }
`;

相關文檔： https://material-ui.com/customization/components/#pseudo-classes