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

Question

我正在使用 @emotion/react主题并将主题注入(inject)其中，我可以使用 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

你需要这样称呼它。见 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,
  // ...
}));