reactjs Flowbite-react浮动标签文档页面出错

ecr0jaav  于 12个月前  发布在  React
关注(0)|答案(1)|浏览(123)

我想使用flowbite-react库中的浮动标签组件。页面上提供的代码片段从flowbite-react导入Spinner`。其他人遇到过这个问题吗?
flowbite-react floating label documentation page

import { Spinner } from 'flowbite-react';
    
function Component() {
  return (
    <div className="grid grid-flow-col justify-stretch space-x-4">
      <FloatingLabel variant="filled" label="Label" />
      <FloatingLabel variant="outlined" label="Label" />
      <FloatingLabel variant="standard" label="Label" />
    </div>
  );
}

字符串

hwamh0ep

hwamh0ep1#

导入FloatingLabel并使用它。这将起作用。

import { FloatingLabel } from 'flowbite-react';

字符串
如果没有,安装并设置Tailwind CSS以使用flowbite

npm i autoprefixer postcss tailwindcss
npx tailwindcss init -p


flowbite插件添加到tailwind.config.js,并包含来自flowbite-react的内容:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    // ...
    'node_modules/flowbite-react/lib/esm/**/*.js',
  ],
  plugins: [
    // ...
    require('flowbite/plugin'),
  ],
};


参考这个docs来正确设置tailwindflowbite-react。然后它就可以工作了。

相关问题