小编won*_*ngz的帖子

在我的 ReactJS 应用程序中使用 SwiperJS。我已导入默认样式包，但无法弄清楚如何设置分页容器或项目符号的样式。

在pagination:参数中...每次我更改el: 参数时，分页就会消失。每次我更改bulletClass:样式时，我在 css 中添加的样式都不会被应用。

import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Pagination, Navigation, A11y } from 'swiper';
import 'swiper/swiper-bundle.css';
SwiperCore.use([Navigation, Pagination, A11y]);

return (
<>
<Swiper
    spaceBetween={50}
    slidesPerView={1}
    navigation
    pagination={{
       clickable: true,
       el: `swiper-container swiper-container-testClass`,
       bulletClass: `swiper-pagination-bullet swiper-pagination-testClass`
    }}
    wrapperTag='ul'
>
    <SwiperSlide tag='li' key={1}>
        {<div>My Data</div>}
    </SwiperSlide>
</Swiper>
</>
)

有人知道如何覆盖默认样式吗？也就是说，我希望将分页容器移动到幻灯片内容上方，而不是底部幻灯片内部（甚至看不到它）。

有问题的 API：Swiper React

一旦触摸了某个组件，然后用户清除了输入，默认行为是继续显示错误。如何才能使触摸后清除输入时错误消失？

下面的代码是文档的摘录

import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, formState: { errors }, handleSubmit } = useForm();
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName", { required: true })} />
      {errors.firstName?.type === 'required' && "First name is required"}
      
      <input {...register("lastName", { required: true })} />
      {errors.lastName && "Last name is required"}
      
      <input type="submit" />
    </form>
  );
}

使用 Tailwindcss 时如何混淆生产中的 HTML 类名？我的项目根据 tailwind 的文档使用 React.js 和 CRACO。

我看到checked:可以启用TailwindCSS变体在选中时更改输入元素，但是如何在选中时更改输入的标签？

这是相关的 Tailwind CSS文档。

下面的示例代码。

在 中启用变体后tailwind.config.js，放入checked:bg-green-300div 或标签不起作用。它只适用于输入。

<div>
  <label>
    <input checked type="radio" name="option1" id="option1" className="hidden" />
    <div>option1</div>
  </label>
  <label>
    <input checked type="radio" name="option2" id="option1" className="hidden" />
    <div>option2</div>
  </label>
</div>

我正在尝试创建一种接受由空格分隔的某些值的任意组合的类型。顺序并不重要。我无法使用字符串文字定义每个组合，因为可接受的值的数量非常长。我怎样才能实现这个目标？

type vals = "apple" | "banana" | "orange"; // much longer list

let str1:vals = "apple" // OK
let str2:vals = "banana" // OK
let str3:vals = "orange" // OK
let str4:vals = "apple banana" // OK
let str5:vals = "banana apple" // OK
let str6:vals = "banana orange" // OK
// etc.

let str7:vals = "banana strawberry" // NOT OK

我正在尝试为处于加载状态的按钮创建一个修饰符。

根据此处的文档，我在 tailwind.config.js 中添加了以下内容

// I assume this is included in tailwindcss 
// and doesn't need to be installed separately
const plugin = require('tailwindcss/plugin')

module.exports = {
     // ...
    plugins: [
        plugin(function({ addVariant }) {
            addVariant('loading', '&:loading')
          })
    ],
};

我认为这允许我在类中添加一个字符串，loading以便它将应用这些样式。但这似乎不起作用，我做错了什么？

<!-- I assume this should be blue-600 -->
<button className="bg-blue-600 loading:bg-blue-100">
  This is a normal button
</button>

<!-- I assume this should be blue-100 since it has className, "loading" -->
<button className="loading bg-blue-600 loading:bg-blue-100">
  This …

我正在创建一个 docker-compose.yml 文件，并且需要为数据库密码使用特殊字符，但 docker-compose 无法正确理解它。

如何在此 .yaml 文件中的密码字段中使用特殊字符？

wordpress:
     depends_on:
       - db
     image: wordpress:latest
     ports:
       - "8000:80"
     restart: always
     environment:
       WORDPRESS_DB_HOST: db:3306
       WORDPRESS_DB_USER: user_1
       WORDPRESS_DB_PASSWORD: '$1234abcd' # Special characters aren't being recognized here
       WORDPRESS_DB_NAME: db1

我尝试了以下方法，但它不起作用

WORDPRESS_DB_PASSWORD: $1234abcd
WORDPRESS_DB_PASSWORD: '$1234abcd'
WORDPRESS_DB_PASSWORD: "$1234abcd"
WORDPRESS_DB_PASSWORD: "\$1234abcd"

我想聚焦div周围的按钮，但只有当键盘聚焦时。通常focus-within有效，但在这种情况下，它应该仅关注键盘焦点 ( focus-visible:)，而不是在使用鼠标单击时 ( focus:)。

本质上，我需要结合focus-within和focus-visible。如何才能做到这一点？

顺风游戏：https://play.tai​​lwindcss.com/ApDB5gSjqv

<div class="flex h-screen items-center justify-center">
  <div class="rounded-lg bg-green-100 px-20 py-20 focus-within:ring-4 focus-within:ring-blue-300">
    <button class="bg-green-200 px-6 py-3 focus:outline-none">Focusable Button</button>
  </div>
</div>

笔记：

• 基于此线程，看起来 w3c 不支持focus-within-visible. 实现这一目标的替代或迂回方式是什么？
• 看起来:has(:focus)某些浏览器支持选择器，但是在 Tailwind 中应该如何应用它......？来源

我在平面列表中有一组盒子。如何让盒子拉伸以固定 FlatList 的宽度？

在这个世博小吃上更容易看到它

<FlatList
  data={DATA}
  horizontal={true}
  contentContainerStyle={{ flex: 1, justifyContent: 'center', alignItems: "center" }}
  style={{ backgroundColor: 'skyblue', width: "100%" }}
  renderItem={({ item, idx }) => (
    <View
      key={'flatlist' + idx}
      style={{ backgroundColor: 'powderblue', padding: 10, margin: 5, flex:1, width: "100%" }}>
      <Text>{item.id}</Text>
    </View>
  )}
  keyExtractor={(item) => item.id}
/>

我正在尝试部署支持 Heroku 的 Nestjs，每当它运行命令时prebuild: rimraf dist都会package.json遇到此错误。我不知道 glob 是什么，但我假设我不需要它......disableGlob = true在 cli/scripts 中设置的语法是什么？

当前错误：

/tmp/build_ceb6e44a/node_modules/rimraf/rimraf.js:42
    throw Error('glob dependency not found, set `options.disableGlob = true` if intentional')
    ^
Error: glob dependency not found, set `options.disableGlob = true` if intentional
    at defaults (/tmp/build_ceb6e44a/node_modules/rimraf/rimraf.js:42:11)
    at rimraf (/tmp/build_ceb6e44a/node_modules/rimraf/rimraf.js:60:3)
    at go (/tmp/build_ceb6e44a/node_modules/rimraf/bin.js:44:3)
    at Object.<anonymous> (/tmp/build_ceb6e44a/node_modules/rimraf/bin.js:68:3)
    at Module._compile (node:internal/modules/cjs/loader:1099:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47
Node.js v17.9.0

注意：Heroku 正在node 17.9.0 …