我正在使用 @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
最佳答案
你需要这样称呼它。见 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,
// ...
}));
关于reactjs - 无法使用 @emotion/styled 访问样式组件中的主题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69718472/