material-ui 无法在作为函数编写的styled()定义中使用条件CSS块,

ffdz8vbo  于 6个月前  发布在  其他
关注(0)|答案(3)|浏览(45)

重复问题

  • 我搜索了现有的问题

最新版本

  • 我测试了最新版本

重现步骤 🕹

链接到实时示例: https://codesandbox.io/s/exciting-agnesi-xnoes2?file=/demo.js

  1. 有2个元素为背景颜色创建覆盖层
  2. 第一个覆盖层使用 styled()/* styles here */ 语法,这可以正确工作
  3. 第二个使用 styled()(({ theme }) => /* styles here */ 语法,覆盖层没有被应用
    语法如下: styled-components/styled-components#3189

当前行为 😯

条件样式应该应用于提供的元素。

预期行为 🤔

样式没有被应用,也没有抛出错误。

上下文 🔦

我正在尝试在有主题变量的块内有条件地渲染CSS块。来自演示的摘录:

const MyComponent = () => {
  const Component = styled("div")(
    ({ theme }) => `
background: black;
${true && css`
background: red;
`}
`);
  return <Component />;
};

结果是具有黑色背景的元素,而不是红色;

你的环境 🌎

  • 无响应*
x3naxklr

x3naxklr1#

感谢您的反馈。看起来像是一个错误!

lyfkaqu1

lyfkaqu12#

这不起作用,因为 css 函数返回的对象作为序列化结果,它会被模板字面量语法转换为字符串,因此在开发环境中会显示为 [object Object],而在生产环境中会显示为 background: red;,而不是预期的 styles
在 MUI 团队修复之前,你可以尝试使用序列化结果的 styles 属性来解决这个问题:

const Component = styled('div')(({ theme }) => {
  return `
padding: theme.spacing(2);
background: black;
${
true &&
css`
background: red;
`.styles
}
`
})

希望这对你有所帮助!

vsikbqxv

vsikbqxv3#

你好,@ZeeshanTamboli。我刚刚尝试修复这个问题,已经取得了一些进展。如果可以的话,我很愿意提交一个PR。

相关问题