如何使用 TailwindCSS 为 React 组件设置样式
How to style React component with TailwindCSS
我在 React 项目中使用 TailwindCSS。我可以通过在 className 属性中传递 TailwindCSS 实用程序 类 来设置普通 HTML 元素的样式，但是当我在组件 className 属性中传递实用程序 类 时，这不起作用，如下所示：
<Dropdown className="hidden sm:block sm:ml-6"/>
Dropdown 是导入到另一个组件的 React 组件。
如何进行这项工作？
如果 <Dropdown/> 是您定制的组件，您可能忘记包含在组件定义中的 div 中，
您可以将 "className" 重命名为 customclass 并将其应用到您的组件定义中。
所以你的代码看起来像
<Dropdown customclasses="hidden sm:block sm:ml-6"/>
和您的组件定义，
const Dropdown = ({ customclasses, ...otherProps }) => <div className={customclasses}></div>
或者如果您不想更改类名，您可以直接在 div
上传播 ...otherProps
const Dropdown = ({ yourprop, yourprop , ...otherProps }) => <div {...otherProps}></div>
我在 React 项目中使用 TailwindCSS。我可以通过在 className 属性中传递 TailwindCSS 实用程序 类 来设置普通 HTML 元素的样式，但是当我在组件 className 属性中传递实用程序 类 时，这不起作用，如下所示：
<Dropdown className="hidden sm:block sm:ml-6"/>
Dropdown 是导入到另一个组件的 React 组件。
如何进行这项工作？
如果 <Dropdown/> 是您定制的组件，您可能忘记包含在组件定义中的 div 中，
您可以将 "className" 重命名为 customclass 并将其应用到您的组件定义中。
所以你的代码看起来像
<Dropdown customclasses="hidden sm:block sm:ml-6"/>
和您的组件定义，
const Dropdown = ({ customclasses, ...otherProps }) => <div className={customclasses}></div>
或者如果您不想更改类名，您可以直接在 div
...otherProps
const Dropdown = ({ yourprop, yourprop , ...otherProps }) => <div {...otherProps}></div>