如何将 CSS 样式应用到我的 <Loader /> React 组件？

Posted 2023-02-23

【中文标题】如何将 CSS 样式应用到我的 <Loader /> React 组件？

【英文标题】：How to apply CSS styles to my <Loader /> React component?

【发布时间】：2022-01-19 12:30:06

【问题描述】：

我有一个为我的 React Web 应用程序编写的按钮代码。我有一个三元运算符，如果加载则显示 Loader，如果加载则显示 children。我正在使用 Materialize CSS library 为其添加一些按钮样式，但它不起作用，我不知道为什么请帮助我。

export const DeprecatedButtonWithLoading: FC<
    
        readonly isLoading: boolean
     & DeprecatedButtonProps
> = ( isLoading, children, ...buttonProps ) => 
    return (
        <DeprecatedButton ...buttonProps>
            isLoading ? <Loader /> : children 
        </DeprecatedButton>
    )

【参考方案1】：

这取决于Loader是否提供这样的API。

我在 Materialise 文档中找不到 Loader，所以我想 Loader 是您的手写组件。在这种情况下，您可以找到您的 Loader 组件，添加 style 属性并将其转发到其容器。例如

const Loader = (props) => 
  return (
    <div style=props.style>
    </div>
  )

但是。如果Loader 是外部组件，那么您应该检查您从哪里获得它的文档。