reactjs - 如何在我的 React 项目中导入 Flowbite？

Question

我正在尝试将 Flowbite 添加到我的 React 项目中，但每次都会遇到此错误

Uncaught SyntaxError: expected expression, got '<'

我的 tailwind.config 文件是

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}", "./node_modules/flowbite/**/*.js"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["Rubik", "sans-serif"],
        kanit: ["Kanit", "sans-serif"],
      },
    },
  },
  plugins: [require("flowbite/plugin")],
};

我已经在index.js中包含了flowbite

import "flowbite";

Answer 1

您应该安装它:

npm i flowbite-react

然后使用以下命令导入到您的组件中:

import { Tooltip } from 'flowbite-react'

这是一个完整的示例:

import React from 'react'
import InfoIcon from '@mui/icons-material/Info'
import { Tooltip } from 'flowbite-react'

const InfoCircle = ({ tooltip }) => (
  <Tooltip content={tooltip}>
    <InfoIcon />
  </Tooltip>
)

export default InfoCircle