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

Question

我正在使用@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

Answer 1

你需要这样称呼它。请参阅本节了解更多详细信息。

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,
  // ...
}));