小编Ros*_*tyk的帖子

module.exports = {
  purge: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./layout/**/*.{js,ts,jsx,tsx}",
    "./const/**/*.{js,ts,jsx,tsx}",
    "./fonts/**/*.{js,ts,jsx,tsx,ttf}",
    "./utils/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: false,
  theme: {
    extend: {
      colors: {
        "brand-green": "#4DF69B",
        "brand-amber": "#FF8656",
        "brand-red": "#FF5656",
        "brand-gray": "#7E7E7E",
      },
      width: {
        content: "fit-content",
      },
      top: {
        20: "5rem",
      },
      fontFamily: {
        DINAlternate: ["DINAlternate", "sans-serif"],
      },
    },
  },
  variants: {
    extend: {
      borderWidth: ["hover"],
      textColor: ["group-focus"],
    },
  },
  plugins: [],
};

我的配置。

我将 next.config.js 更改为 next.config.ts，然后它告诉我它应该具有 .js 格式，我重写了它，正如我所想，在我尝试将每个文件移至 .ts 格式后，我的顺风车断了。它适用于 margins/paddins，但不适用于 bg，尽管它适用于 text-red-200

如果我检查元素，我可以看到 bg-brand-red 类，但它只是不应用它们。它运行良好，但在我重构代码后，它崩溃了，但是一旦我将所有内容重置为上一次提交，我仍然遇到背景颜色不起作用的问题。

这很奇怪，因为它工作过一次，5 分钟后就坏了，即使我回滚到 github 上的最后一次提交，它仍然坏了

我怎样才能知道问题是什么？

我有这个切片

注销.js

import { createSlice } from '@reduxjs/toolkit';
import { logoutUser } from './actions/logoutUserAction';

const initialState = {
  status: null,
};

const logout = createSlice({
  name: 'logout',
  initialState,
  reducers: {
    changeStatus: state => { <===== I want to use this action
      state.status = null;
    },
  },
  extraReducers: {
    [logoutUser.pending]: state => {
      state.status = 'loading';
    },
    [logoutUser.fulfilled]: state => {
      state.status = 'success';
    },
    [logoutUser.rejected]: state => {
      state.status = 'failed';
    },
  },
});

export const { changeStatus } = …

import produce from "immer";\n\nconst initialState = {\n  isLoading: true,\n  error: "",\n  burgers: [],\n};\n\nexport default function (state = initialState, action) {\n  switch (action.type) {\n    case "ADD_BURGER_BUCKET": {\n      return produce(state, (draftState) => {\n        if (Array.isArray(action.payload)) {\n          draftState.burgers.push(...action.payload);\n        } else {\n          draftState.burgers.push(action.payload);\n        }\n      });\n    }\n    case "REMOVE_BURGERS_BUCKET": {\n      return produce(state, (draftState) => {\n        draftState.burgers = []\n      });\n    }\n    **case "REMOVE_ONE_BURGER_BUCKET": {\n      return produce(state, (draftState) => {\n        console.log(action.payload, draftState.burgers) console.log => 3 Proxy\xc2\xa0{0: {\xe2\x80\xa6}}\n        draftState.burgers.filter(el => el.id !== action.payload)\n      })\n    }** HERE THIS ONE …

一旦数据库中没有数据，我想禁用向右滑动。

if (data.length > 1) {
  // I can swipe to the left or right
} else {
  // I can't swipe to the right only left
}                          

实现这一目标是真的吗？也许，一旦向右滑动，我就可以将元素返回到中心

解决方案：我刚刚在 Dismissible 小部件中使用了 confirmDismiss。

confirmDismiss: (direction) {
  if(data.length > 0 && direction==..)
  // do stuff
  else if(...)
}

我是材料用户界面新手。

我用的是第五版。

            <InputBase
              ref={params.InputProps.ref}
              inputProps={params.inputProps}
              autoFocus
              sx={{
                ...InputCSS,
              }}
            />


const InputCSS = {
  width: '100%',
  textIndent: '17px',
  py: '12px',
  fontSize: '20px',
  borderRadius: '3px',
  border: '1.5px solid rgba(0, 0, 0, 0.4)',
  'MuiInputBase-root': { // does not work
    borderColor: 'red !important',
    color: 'red !important',
  },
  '&:focus' : { // does not work
     ...
   }
}

我可以使用 styled('input') 并且它可以工作，我可以设置&:focus并且它可以工作，但我无法在输入中键入任何内容。

我想摆脱初始边框并设置焦点属性。

如何更改该类的边框？

我知道在 v5 中我们可以使用变体或 sx 或 styled 来设置组件的样式。

对 mui 组件进行样式设计的最佳建议是什么？因为互联网上几乎所有信息都使用过时的 useStyle 或 makeStyles，它们不适用于 React 18v。

有时我只是在 mui 中的组件样式上遇到困难

REFETCH_TYPE_LIST如果我从此方法中收到错误，我不想重新获取

dosomething: builder.mutation<void, number>({
  query: (id) => ({
    url: `api`,
    method: 'PATCH',
  }),
  invalidatesTags: (result) => (result ? ['REFETCH_TYPE'] : []),
}),

我能想到的就是满足这个条件，也许还有其他更好的解决方案？