样式不适用于我在 TypeScript 中创建的 React 库

Posted 2023-02-22

【中文标题】样式不适用于我在 TypeScript 中创建的 React 库

【英文标题】：Styles aren't applied to the React library I made in TypeScript

【发布时间】：2020-11-21 05:10:17

【问题描述】：

我创建了一个 React 库 https://github.com/deadcoder0904/react-typical/ 并在 examples/ 文件夹中的该组件中添加了样式，但未应用样式。

这是example/index.tsx 文件：

import 'react-app-polyfill/ie11';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import  ReactTypical  from '../.';

const App = () => 
  const hypeText = ['Creator', 'Entrepreneur', 'Doer', 'Lone Wolf'];
  return (
    <>
      <ReactTypical
        style=
          color: 'red',
          fontSize: 256,
        
        steps=hypeText.flatMap(hype => [hype, 5000])
        loop=Infinity
      />
    </>
  );
;

ReactDOM.render(<App />, document.getElementById('root'));

style 属性已添加到库中的 src/index.tsx 文件中：

export type Props = 
  steps: Array<any>;
  loop: number;
  className?: string;
  wrapper?: keyof JSX.IntrinsicElements;
 & React.htmlAttributes<HTMLOrSVGElement>;

我认为 React.HTMLAttributes 包含所有 React HTML 属性，因此 style 必须在那里可用。

是不是我做错了什么？

【参考方案1】：

您的库接受任何 React.HTMLAttributes<HTMLOrSVGElement>，但不使用它们，也不传递它们。

你需要这样的东西：

const Typical = ( steps, loop, className, wrapper: Wrapper = 'p', ...otherProps : Props) => 

...

return React.createElement(Wrapper, 
  ...otherProps,
  ref: typicalRef,
  className: typicalStyles,
);

【讨论】：

谢谢你的工作。需要打字吗？我的意思是otherProps 的类型是什么，或者我应该这样保留它吗？

没有。 otherProps 是 Props 或 Props 的某个子集。打字稿应该自动处理这个。