css - 如何用emotionJS正确覆盖现有的className

Question

我正在尝试使用情感来覆盖来自 3rd 方库的现有 React 组件的样式。

我尽力简化此代码框中的问题

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

如您所见，它接受 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};
  }
`;

但是检查样式标签，我有很多重复的样式，我做错了什么？

你可以看到有两倍的黄色背景

标签： cssstyled-componentsemotion

Answer 1

在这里我发现，使用 css prop 到父标签 css={{ "& .class__youwant--overwrite": { margin: 80 } }}

在我的情况下工作