Блог

У меня чертовски много времени, чтобы исправить свои наброски, поэтому мне было любопытно, есть ли у кого-нибудь рабочий пример или какая-то обратная связь о том, где я ошибаюсь. Есть две вещи , которые мне нужно сделать с этим экземпляром createUseStyles , принять тему, а также реквизит.

Я взял пример с веб-сайта документации, и, конечно, сразу же он уже выдает ошибки машинописи, что понятно:

(вставка скриншота только для того, чтобы показать ошибки машинописи)

блок кода со скриншота:

 import React, { ReactNode, CSSProperties } from "react";
import {
  createUseStyles,
  useTheme,
  ThemeProvider,
  DefaultTheme,
  Styles
} from "react-jss";

interface Props {
  children: ReactNode;
  useRed: boolean;
}

interface PUTheme {
  colorPrimary: string;
  altColor: string;
}

const useStyles = createUseStyles({
  button: {
    background: ({ theme }) => theme.colorPrimary
  },
  label: {
    fontWeight: "bold"
  }
});

const Button2: React.FC<Props> = ({ children, ...props }) => {
  const theme = useTheme();
  console.log(theme);
  const classes = useStyles({ ...props, theme });
  return (
    <button className={classes.button}>
      <span className={classes.label}>{children}</span>
    </button>
  );
};

const theme = {
  colorPrimary: "green",
  altColor: "red"
};

const App = () => (
  <ThemeProvider theme={theme}>
    <Button2 useRed={true}>I am a button 2 with green background</Button2>
  </ThemeProvider>
);

export default App;

 

The error found here (Error 1) is:

   button: {
    background: ({ theme }) => theme.colorPrimary
  },
 

Property ‘colorPrimary’ does not exist on type ‘Theme’.ts(2339)

Makes sense to an extent — it doesn’t know what our theme consists of, so moving on…

The error found here (Error 2) for theme is:

 const classes = useStyles({ ...props, theme });
 

Тип «DefaultTheme» не может быть присвоен типу «Тема».
Тип «null» не может быть присвоен типу «Тема». ts(2322)

Немедленно.. Я немного сбит с толку. Но давайте наберем некоторые вещи и посмотрим, как это получится…

Добавление интерфейса для моей темы, похоже, не изменяет ни одну из вышеперечисленных ошибок:

 interface PUTheme {
  colorPrimary: string;
  altColor: string;
}

const theme: PUTheme = {
  colorPrimary: "green",
  altColor: "red"
};
 

Таким образом, поскольку добавление интерфейса к объекту моей темы, похоже, мало что дает, я смог устранить ошибку из ошибки 1, добавив типизацию. Пока это успокаивает машинописный текст, мне кажется, что это не так?

 const useStyles = createUseStyles({
  button: {
    background: ({ theme }: {theme: PUTheme}) => theme.colorPrimary
  },
  label: {
    fontWeight: "bold"
  }
});
 

Тем не менее, это все еще оставляет меня с ошибкой 2, за исключением того, что ошибка немного изменилась

Тип «DefaultTheme» не может быть присвоен типу «PUTheme». Тип «null» не может быть присвоен типу «PUTheme»

Я пытался проследить за вводом react-jss текста, но, возможно, в данный момент это выше моего понимания.

У кого-нибудь есть какие-либо советы или понимание того, что я делаю неправильно, или рабочие примеры? Кроме того, здесь есть ссылка на песочницу «Мой код«, если вы хотите увидеть ее в действии.

Вы можете попробовать некоторые заклинания, подобные этому:

 const useStyles = createUseStyles({
  button: {
    background: (theme: PUTheme) => theme.colorPrimary
  },
  label: {
    fontWeight: "bold"
  }
});

const Button2: React.FC<Props> = ({ children, ...props }) => {
  const theme = useTheme() as PUTheme;
  console.log(theme);
  const classes = useStyles(theme);
  return (
    <button className={classes.button}>
      <span className={classes.label}>{children}</span>
    </button>
  );
};
 

Обратите внимание, что он ничего не передает props useStyles . Глядя на определение типа этой функции, кажется, что она может принимать только « Theme »

Я думаю, что нашел решение. Передача темы/реквизита классам все еще кажется мне странной, но она работает и удовлетворяет машинописному тексту.

 import React, { ReactNode } from "react";
import { createUseStyles, useTheme, ThemeProvider } from "react-jss";

interface Props {
  children: ReactNode;
  useRed: boolean;
}

interface PUTheme {
  colorPrimary: string;
  altColor: string;
}

const useStyles = createUseStyles({
  button: {
    background: ({
      theme,
      useRed
    }: {
      theme: PUTheme;
      useRed: Props["useRed"];
    }) => (useRed ? theme.altColor : theme.colorPrimary)
  },
  label: {
    fontWeight: "bold"
  }
});

const Button2: React.FC<Props> = ({ children, ...props }) => {
  const theme = useTheme<PUTheme>();
  const classes = useStyles({ ...props, theme });
  return (
    <button className={classes.button}>
      <span className={classes.label}>{children}</span>
    </button>
  );
};

const theme: PUTheme = {
  colorPrimary: "green",
  altColor: "red"
};

const App = () => (
  <ThemeProvider theme={theme}>
    <Button2 useRed={true}>I am a button 2 with green background</Button2>
  </ThemeProvider>
);

export default App;

 

Главное, чего, по-моему, не хватало, — это useTheme напечатать const theme = useTheme<PUTheme>();

Посмотреть рабочую песочницу кода можно здесь!