小编Ed *_*cas的帖子

是否可以在 VITE 中构建并使用application-name.cssor my-site-name.css？

VITE 可以选择构建自定义 JS 文件，但不能构建自定义 CSS 或 SCSS 文件（用于导出）。

https://vitejs.dev/guide/build.html#library-mode

VITE 构建名称：style.css

这是我第一次介绍反应流。我希望创建一个自定义节点，创建后，用户可以在节点中输入信息并保存/显示它。从自定义节点上的反应流文档中，他们有一个类似的示例，其中创建了用户输入的TextUpdaterNode节点。console.logs

我不是通过控制台记录它，而是寻找一种将信息保存到节点本身并将其显示在节点上的方法。例如，如果用户要在输入中输入“24，男性”并按“回车”键，我希望使用该信息更新节点。

我可以采取哪些方法来做到这一点？

除了斜体和粗体之外，降价不起作用。我发现这个问题是由 Tailwind CSS 引起的，因为它处理文本大小和其他样式的方式。如果我在 my 中注释掉index.css导入（定义了 Tailwind 的指令）index.jsx，则所有 Markdown 类型（如标题、代码等）都可以正常工作。

新闻.jsx

import ReactMarkdown from 'react-markdown';
import { useState } from 'react';

function News() {
  const [markdown, setMarkdown] = useState('# I am heading');
  
  return (
    <div>
      <textarea value={markdown} onChange={e => setMarkdown(e.target.value)} />
      <ReactMarkdown>{markdown}</ReactMarkdown>
    </div>
  );
}

export default News;

index.css

import ReactMarkdown from 'react-markdown';
import { useState } from 'react';

function News() {
  const [markdown, setMarkdown] = useState('# I am heading');
  
  return (
    <div>
      <textarea value={markdown} onChange={e …

使用 WordPress 数据模块（古腾堡项目的@wordpress/data一部分）时，使用方法很容易获取帖子或其他实体。这是古腾堡内部使用它的一个例子。select('core').getEntityRecords

但是，在这种情况下我找不到处理错误的方法（例如网络错误）。正如有一种方法可以检查请求是否在进行中 ( isResolving)，我希望有一个用于错误处理的方法。

一些背景：

• getEntityRecords 方法
• apiFetch处理程序，getEntityRecords内部使用

我使用 create-react-app 创建了一个应用程序。下面是我的计数器组件和测试文件。我正在尝试为组件中的三个静态按钮创建一个测试。第一个测试运行良好，而第二个测试给出了下面提供的错误。

反应成分：

    import React from "react";
    import PropTypes from "prop-types";
    import classes from "./Counter.module.css";
    function Counter(props) {
      return (
        <div className={classes.Wrapper}>
          <div>
            <p>
              Click Counter -  {props.value}
            </p>
          </div>
          <div>
            <button onClick={props.counterIncrement} className={classes.custButton} name="first"> Increment </button>
            {/* <button onClick={props.counterDecrement} className={classes.custButton}> Decrement </button>
            <button onClick={props.resetCounter} className={classes.custButton}> Reset </button> */}
          </div>
        </div>
      );
    }
    Counter.propTypes = {
      value: PropTypes.number,
      clickHandler: PropTypes.func,
    };
    export default Counter;

测试文件：

    import React from 'react'
    import {render, fireEvent, screen, cleanup} from '@testing-library/react'
    
    import Counter from …

我将这个 CSS 用于 Slick 滑块中的幻灯片：

backdrop-filter: blur(10px)

但是，当我单击以显示下一张幻灯片时，CSS 模糊会消失一秒钟，然后幻灯片再次模糊。当用鼠标拖动幻灯片时，CSS 模糊在鼠标上消失。

我怎样才能解决这个问题？

代码笔：https ://codepen.io/maxbeat/pen/abNBrex

.slider__item {
  height: 200px;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 24px arial;
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(10px);
}

我是 Tailwind CSS 新手。我在构建 React 项目时遇到此错误：

该类hover:不存在。如果hover:是自定义类，请确保它是在@layer指令中定义的。

我在 StackOverflow 上发现了类似的问题，但它对我没有帮助。谁能告诉我为什么会发生这种情况？

//Index.css 
@tailwind base;
@tailwind components;
@tailwind utilities;


@layer components {
    .btn-purple {
        @apply px-4 py-1 text-sm text-purple-600 font-semibold border border-purple-200 rounded-full hover: text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2;
    }
}

我想用一个类包装生成的 Tailwind 实用程序类，以防止它们渗透到消费者样式表中，如下所示：

.root {
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  @tailwind variants;

 .exampleClass { }
}

<div className="root">{children}</div>

然而，这是行不通的。

您能给我一些建议来解决这个问题吗？提前致谢。

我正在开发一个Reactjs项目，该项目使用Tailwind CSS作为我的 CSS 框架，并且我正在尝试使用自定义颜色构建一个主题。

我在文件中将颜色定义为 CSS 变量index.css，但设置 alpha 值对这些颜色不起作用。

这是我的颜色值的 CSS：

  @layer base {
    :root {
        --base: 26 27 27;
        --light: 43 43 43;
        --lighter: 81 81 81;
        --text-base: 235 235 235;
        --text-inverted: 71 72 72;
        --color-primary: 241 218 19;
        --color-primary-light: 245 226 66;
        --color-danger: 243 75 19;
        --color-danger-light: 245 111 66;
        --color-accent: 242 142 19;
        --color-accent-light: 245 165 66;
        --color-secondary: 235 235 235
       }
    }

我在文件中配置了一个自定义主题，tailwind.config.js如下所示：

 module.exports = {
    content: [ …

我想在选中复选框时向我的复选框容器添加边框。

目前，我有这个：

<label
  htmlFor="choose-me"
  className=
    'flex w-fit items-center justify-evely p-3 border-2 border-grey-4 text-grey-8 
     peer-checked:bg-light-indigo peer-checked:text-medium-indigo peer-checked:border-medium-indigo'>
  <input type="checkbox" id="choose-me" className="peer mr-3 " />
  Check me
</label>

我想要类似下面的东西：

但是，当我将输入放入标签中时，我无法更改标签样式。