无法使用@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

你需要这样叫它。有关更多详细信息，请参阅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,
  // ...
}));

​

​