如何使用情感JS正确覆盖现有的className

Question

我正试图用情感来覆盖第3方库中现有React组件的样式。

我尽力简化此codesandbox

中的问题

ExternalLib模拟了我正在使用的第三方组件，我不应该更改代码。

如您所见，它接受css命名空间的“前缀”道具，并在静态字符串中使用className。（原始名称也将其作为sass变量）

我首先尝试使用css函数获取基类名哈希，然后尝试通过情感合成的方式来构成基类名，并获得预期的视觉效果。

const baseStyle = css`
  background-color: blue;
  width: 200px;
  height: 200px;
`;

const getItemStyle = ({ disabled }) => {
  return `
    height: 50px;
    margin: 4px;
    background-color: ${disabled ? "gray" : "yellow"};
  `;
};

const getTextStyle = ({ color }) => {
  return `
    color: ${color}
  `;
};

const StyledExternalLib = styled(ExternalLib)`
  .${baseStyle}-track {
    ${getItemStyle};
  }
  .${baseStyle}-text {
    ${getTextStyle};
  }
`;

无论如何检查样式标签，我都有很多重复的样式，我在做什么错了？

您会看到黄色背景的两倍

Answer 1

这是我发现的内容，对父标签使用css prop css={{ "& .class__youwant--overwrite": { margin: 80 } }}

以我的情况工作