Динамический CSS в typescript - как получить доступ к параметру, переданному методу useStyles

#reactjs #typescript #jss #css-in-js

Вопрос:

Я пытаюсь получить доступ к состоянию моего компонента в useStyles методе, созданном с использованием пакета react-jss. Код кажется правильным для javascript, но не для typescript, согласно тому, что я нашел в Интернете.

 
import { createUseStyles } from 'react-jss';

const useStyles = createUseStyles({
  myClass: {
    height: `${height}px`, // <== squiggly line here since I don't know how to pass the parameters
  },
});

export function Collapse() {

  const [height, setHeight] = useState(18);
  const classes = useStyles(height);

  return (
    <div>...</div>
  );
}

Как я могу этого добиться?

1. const useStyles = createUseStyles({ MyClass: props => ({ height: ${props.height}px }) });

2. Спасибо, я обновил свой код. Я не могу использовать здесь реквизит. Также props неизвестно.

3. Я обновил свой код. Пожалуйста, проверьте. Пожалуйста, обратитесь к ссылке github.com/cssinjs/jss/issues/1273

4. Большое вам спасибо, мне удалось добиться того, чего я хотел.

5. @Ploppy Рассмотрите возможность публикации ответа на ваш вопрос, если вы нашли решение самостоятельно / с помощью комментариев. Это поможет любому, кто столкнется с этим вопросом, поскольку ссылка от K.Raj может со временем стать недоступной.

Ответ №1:

Использование функции в моих стилях позволяет мне получить доступ к нужному параметру.

 
import { createUseStyles } from 'react-jss';

const useStyles = createUseStyles({
  myClass: props => ({
    height: `${height}px`,
  }),
});

export function Collapse() {

  const [height, setHeight] = useState(18);
  const classes = useStyles({height: height});

  return (
    <div>...</div>
  );
}

Ответ №2:

лучше сделать типы понятными, когда вы используете jss и typescript вместе. в этом случае вам нужно указать тип параметров, которым вы хотите их передать jss . (прочитайте эту статью для лучшего понимания)

в версии 10.6.0 они добавили функцию для указания типов параметров, которым вы их передаете jss , более удобным способом. jss в вашем случае, прежде всего, мы точно указываем имена классов и типы:

 import { Classes, Styles } from "jss";
import { createUseStyles } from "react-jss";

type CollapseStyleProps = { height?: number };
type CollapseClassNames = "myClass";
type CollapseClasses = Classes<CollapseClassNames>;
type CollapseStyles = Styles<CollapseClassNames, CollapseStyleProps>; //we specify types of props here

а затем мы напишем стили в jss :

 const getStyles: CollapseStyles = {
  myClass: {
    height: ({ height }) => height,
    transition: "500ms"
  }
};

const useCollapseStyle: (data?: any) => CollapseClasses = createUseStyles(getStyles);

теперь на последнем шаге приступайте к реализации Collapse самого компонента:

 function Collapse() {
  const [height, setHeight] = useState(18);
  const classes = useCollapseStyle({ height });

  const heightHandler = () => {
    height === 18 ? setHeight(108) : setHeight(18);
  };

  return (
    <div>
      <div className={classes.myClass}>Test App</div>
      <button onClick={heightHandler}>toggle height</button>
    </div>
  );
}

вы можете увидеть рабочий пример здесь, в codesandbox