无法使用 @emotion/styled 访问样式化组件中的主题

Posted 2023-03-15

【中文标题】无法使用 @emotion/styled 访问样式化组件中的主题

【英文标题】：Not able to access theme in styled component using @emotion/styled

【发布时间】：2021-12-11 13:16:55

【问题描述】：

我正在使用@emotion/react 进行主题化并将主题注入其中，我可以使用useTheme 将主题访问到组件中，但无法使用@emotion/styled 将主题访问到样式中。请问有什么帮助吗？

//libs
import React from 'react';
import styled from '@emotion/styled';

import StylesProvider from '@mui/styles/StylesProvider';
import  ThemeProvider  from '@emotion/react';


const THEME = 
  primary: 'red'


const StyledText = styled('p')`
  color: $( theme ) => theme.primary;
`;

function App() 
  return (
    <StylesProvider injectFirst>
      <ThemeProvider theme=THEME>
        <StyledText>test</StyledText>
      </ThemeProvider>
    </StylesProvider>
  );


export default App;



here is sample code

【问题讨论】：

在我的问题中添加了示例代码。

【参考方案1】：

你需要这样称呼它。有关详细信息，请参阅this 部分。

const StyledTextField = styled('div')(( theme ) => `
  margin: $theme.spacing(1);
  background-color: $theme.palette.primary.main;
  /* ... */
`);

或者你也可以像文档中那样使用 JS 对象：

const StyledTextField = styled('div')(( theme ) => (
  margin: theme.spacing(1),
  backgroundColor: theme.palette.primary.main,
  // ...
));

【讨论】：

它不起作用，错误似乎是“'主题'类型上不存在属性'间距'。”

@RupinderpalThind 查看我更新的答案。您可以探索主题对象here。如果你想访问原色，它是theme.palette.primary.main，而不是theme.primary

这里仍然无法访问主题，我正在使用打字稿，可能会导致任何问题吗？

@RupinderpalThind 我看不到你在哪里导入 styled 函数，但你需要从 @mui/material/styles 导入它才能与 MUI 主题对象一起使用。

我在“@emotion/styled”中使用它

【参考方案2】：

创建“emotion.d.ts”并声明您的主题：

import "@emotion/react";

declare module "@emotion/react" 
  export interface Theme 
    color: 
      primary: string;
    
  

将文件“emotion.d.ts”导入“tsconfig.ts”：

"typeRoots": ["emotion.d.ts"]

重新加载窗口并像这样使用它：

const StyledText = styled('p')`
  color: $( theme ) => theme.color.primary;
`;

如果您使用 Mui，让我们扩展您的主题：

export interface Theme extends ThemeOfMui