css 如何覆盖顺风窗体库的默认颜色?

pjngdqdw  于 2023-11-19  发布在  其他
关注(0)|答案(1)|浏览(120)

我有一个自定义的形式,我使用tailwindcss forms库的风格。
我想覆盖默认样式,但找不到位置。我在tailwind.config.cjs文件中定义了几种新颜色,但似乎我必须手动将颜色类添加到所有单独的表单中。
下面是其中一个组件上的覆盖示例:

const radioBtn = (a: SurveyAnswer) => {
    return (
      <>
        <label>
          <input
            className="form-radio text-lightGreen focus:ring-green"
            type="radio"
            name="myRadio"
            value={a.answer}
            onClick={(e) => handleChange((e.target as HTMLInputElement).value)}
            onChange={() => {
              setDisabledInput("");
              return;
            }}
          />
          <span className="mx-2">{a.answer}</span>
        </label>
      </>
    );
  };

字符串
理想情况下,我想说的是,所有的表单输入都应该在tailwind配置文件中使用这个配色方案。
这是我当前的tailwind配置文件。

/** @type {import('tailwindcss').Config} */
// tailwind.config.js

module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      screens: {
        sm: "375px", //mobile M
        md: "768px", //tablet
        lg: "1024px", //laptop
        xl: "1280px", //laptop L
        "2xl": "2560px", //4k
      },

      backgroundImage: (theme) => ({
        "farmer-working": "url('/State-CEDS-Shawn-Uehira-p29.png')",
        spectrum:
          "linear-gradient(orange, transparent),  linear-gradient(to top left, cyan, transparent), linear-gradient(to top right, purple, transparent)",
        spectrum2:
          "linear-gradient(  steelBlue, black,  transparent), linear-gradient(to bottom left, cyan, transparent), linear-gradient(to top right, plum, transparent)",
      }),
      backgroundSize: {
        bgBig: "100% 110%",
      },
      animation: {
        "slide-in": "slide-in 0.7s ease-out",
      },
      keyframes: {
        "slide-in": {
          "0%": { transform: "translateY(100%)", opacity: 0 },
          "100%": { transform: "translateY(0)", opacity: 100 },
        },
      },
    },
    colors: {
      green: "#1A9432",
      lightGreen: "#1FCE1F",
      yellowGreen: "#89E21D",
      blue: {
        lighter: "#COD8ED",
        default: "#3276AE",
        darker: "#17364F",
      },
      white: "#FFFFFF",
      gray: "#4C4C4C",
      red: "#F52020",
    },
  },
  plugins: [require("@tailwindcss/forms")],
  mode: "jit",
};


感谢您的帮助!

fquxozlt

fquxozlt1#

根据这个插件的作者的建议,定制样式的方法是只写css
例如,为了覆盖输入焦点样式,你可以在你的css文件中使用这样的东西:

@layer base {
    [type='text']:focus,
    input:where(:not([type])):focus,
    [type='email']:focus,
    [type='url']:focus,
    [type='password']:focus,
    [type='number']:focus,
    [type='date']:focus,
    [type='datetime-local']:focus,
    [type='month']:focus,
    [type='search']:focus,
    [type='tel']:focus,
    [type='time']:focus,
    [type='week']:focus,
    [multiple]:focus,
    textarea:focus,
    select:focus {
        --tw-ring-color: theme('colors.yellow');
        border-color: var(--tw-ring-color);
    }
}

字符串

相关问题