应用 Tailwind 层组件指令来重新混合 React 组件

Question

我正在尝试在混音项目中创建顺风指令。当我在 tailwind.css 的图层组件下创建 css 类并将其应用到 React 组件 className 时，不知怎的，我看不到样式对组件的影响。

@layer components {
    .note-view-article-container {
        @apply bg-gray-300 px-5 py-2 my-10;
    }
    .note-view-title {
        @apply border border-zinc-500 text-center text-lg
    }
}

下面的组件，

export function NoteView(props: Note) {
  const { id, title } = props;
  return (
    <article className=".note-view-article-container" key={id}>
      <p className=".note-view-title">
        {title}
      </p>
      );
     }

我可以做什么来解决这个问题？谢谢！

Answer 1

尝试使用

className="note-view-article-container"

而不是

className=".note-view-article-container"

。 如何在react中应用css样式

export function NoteView(props: Note) {
  const { id, title } = props;
  return (
    <article className="note-view-article-container">
      <p className="note-view-title">
        {title}
      </p>
    </article>
  );
}

而且，在没有看到组件的完整源代码的情况下很难推理，但很可能您不需要文章的 key 属性。