小编Ena*_*dot的帖子

这就是我的问题的样子（见环）：

看图

使用Chrome的检查器发现它与--tw-ring-shadow. 所以我尝试添加类似ring-0和 的类ring-offset-0（如下所示），但它不起作用！

    import { TextField } from "@mui/material";
    
    
    function ContactForm(): JSX.Element {
      return (
        <div className="form-container pt-12 flex flex-col items-center">
          <div className="input-row">
            <TextField
              className="ring-offset-0 ring-0"
              label="First Name"
              variant="outlined"
            />
          </div>
        </div>
      );
    }
    
    export default ContactForm;

您知道如何摆脱与输入字段重叠的恼人边框吗？

我将不胜感激你的帮助！

使用 Nextjs，预期结果是看到图像组件渲染为 .WebP 或 .AVIF，但它仍然是 jpg -

下面是我的 next.config.js

/** @type {import('next').NextConfig} */
module.exports = {
  images: {
    domains: ['cdn.sanity.io'],
    formats: ['image/avif', 'image/webp'],
  },
  reactStrictMode: true,
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: [{ loader: '@svgr/webpack', options: { icon: true } }],
    });
    return config;
  }, };

以下是 next/image 组件：

   <Image
                          className="kitchen-img"
                          loader={myLoader}
                          loading="lazy"
                          layout="fill"
                          objectFit="cover"
                          src={urlFor(kitchen.mainImage).url()!}
                          alt={kitchen.title}
                        />

知道为什么它没有以 avif/webp 的形式出现吗？我缺少什么？

const myLoader = ({ src, width, quality }: any) => {
return `${src}?w=${width}&q=${quality || 85}`  };