reactjs - Kan inte komma åt temat i en styled-komponent med @emotion/styled

Jag använder @emotion/react för tematisering och har injicerat tema i det, jag kan komma åt temat med useTheme i komponenten men kan inte komma åt temat i stilarna med @emotion/styled. Någon hjälp, tack?

//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

Svar #1

  1. Skapa "emotion.d.ts" och deklarera ditt Tema:
import "@emotion/react";

declare module "@emotion/react" {
  export interface Theme {
    color: {
      primary: string;
    }
  }
}
  1. Importera definitivt typfilen "emotion.d.ts" till "tsconfig.ts":
"typeRoots": ["emotion.d.ts"]
  1. Ladda om fönstret och använd det så här:
const StyledText = styled('p')`
  color: ${({ theme }) => theme.color.primary};
`;
  1. Om du använder Mui, låt oss utöka ditt tema:
export interface Theme extends ThemeOfMui{}

Svar #2

Du behöver kalla det på det här sättet. Se den här sektionen för mer detaljer.

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

Eller så kan du också använda JS-objektet som i dokumentationen:

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

Relaterade artiklar