typescript 中的动态 CSS - 如何访问传递给 useStyles 方法的参数

Question

我试图在使用 react-jss 包创建的 useStyles 方法中访问我的组件的状态。根据我在网上找到的内容，该代码似乎对 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>
  );
}

我怎样才能做到这一点？

Answer 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>
  );
}

Answer 2

jss和typescript一起使用时，最好明确类型。在这种情况下，您需要指定要将它们传递给 jss 的参数类型。（阅读 this article 以获得更好的理解）

在 jss 的 v10.6.0 中，他们添加了一项功能，以更方便的方式指定您将它们传递给 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

上查看工作示例

typescript 中的动态 CSS - 如何访问传递给 useStyles 方法的参数

Dynamic CSS in typescript - How to access parameter passed to the `useStyles` method

typescript

reactjs

jss

css-in-js