小编Mos*_*she的帖子

我正在使用VueJS 2处理模态组件.现在,它基本上可以工作 - 我点击一个按钮,模态打开,等等.

我现在要做的是为模态创建一个唯一的名称,并将该按钮与该特定按钮相关联.

这就是我的想法.模态具有唯一的名称属性:

<modal name='myName'>CONTENT</modal>

这将是关联按钮:

<button @click="showModal('myName')"></button>

我需要弄清楚的是如何将showModal的参数传递给模态组件.

这是我在root vue实例中使用的方法(即,不在我的模态组件中):

methods: {
    showModal(name) { this.bus.$emit('showModal'); },
}

我想要做的是访问组件中的name属性 - 如下所示:

created() {
    this.bus.$on('showModal', () => alert(this.name));
}

但这显示为undefined.

那么我做错了什么？如何访问模态组件中的name属性？

注意:如果您想知道this.bus.$ on是什么,请参阅我之前提出的问题的以下答案:https://stackoverflow.com/a/42983494/7477670

我正在尝试为 Material UI 中的组件创建自定义变体Button。

我的第一步是Button使用我想要的样式创建一个基于组件的组件：

// CTA.js

import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles({
  root: { // CUSTOM__STYLES },
  label: { // CUSTOM__STYLES },
});

const CTA = ({ children }) => {
  const classes = useStyles();

  return (
    <Button
      classes={{
        root: classes.root, 
        label: classes.label,
      }}
    >
      {children}
    </Button>
  );
};

然后，我将该组件导入到Button我正在创建的新组件中，如下所示：

// Button.js
import MuiButton from "@material-ui/core/Button";
import CTA from "./CTA";

const Button = ({ variant, …

我想弄清楚如何设计我使用react-icons.

特别是，我希望能够创建与此类似的外观：

也就是说，我想添加背景颜色、填充、边框半径等。但是，我找不到一种简单的方法来做到这一点。

我可以添加一个大小和颜色道具，这将改变图标的​​实际大小和颜色。但是我没有简单的方法来改变其他元素。

有谁知道我该怎么做（或者他们可以推荐一个可以帮助我解决这个问题的不同图书馆）？

我使用 TailwindCSS 创建了一个 VueJS 按钮组件。我的目标是为该按钮组件提供一些基本样式（使用 tailwindcss 类），并在需要时选择覆盖它们（再次使用 tailwind css 类）。

例如，这是Button组件的简化版本：

// Button.vue

<template>
  <button class="bg-green-500 text-white py-2 px-4 rounded">
    Click Me
  </button>
</template>

这是我在另一个文件中使用该组件的示例：

// index.vue

<Button></Button>
<Button class="bg-red-600"></Button>
<Button class="bg-blue-600"></Button>

问题是这只能起到一半的作用。也就是说，bg-blue-600确实覆盖了bg-green-500我在Button.vue. 但bg-red-600也不能忽略的背景颜色（presumbably，因为bg-red-600来之前在CSS源代码。

因此，我想知道如何正确设置它？也就是说，我如何为Button组件提供一些基本样式（再次使用 tailwind css 类），同时还提供使用 tailwind css 类覆盖这些样式的选项。

谢谢。

我正在尝试将类名添加到 React 组件，以便我可以更轻松地使用样式化组件自定义该组件。以下是该组件的简化轮廓：

const SignupForm = props => (
    <form>
      <Input className="input" />
      <Button className="button" />
    </form>
  )

这是我想如何使用它：

import { SignupForm } from '../path/to/signup-form'

  <Form />
...

const Form = styled(SignupForm)`
  .input {
     /* Custom Styles */
  }

  .button {
     /* Custom Styles */
  }
`

但是，这不起作用。只有当我创建一个包装组件时它才会工作 - 像这样：

import { SignupForm } from '../path/to/signup-form'

  <FormWrapper>
    <SignupForm/>
  <FormWrapper>
...

const FormWrapper = styled.div`
  .input {
     /* Custom Styles */
  }

  .button {
     /* Custom Styles */
  }
`

我想知道是否有一种方法可以访问 …

我有一个@svgr/webpack安装了该库的 Next.js 站点。我已配置next.config.js为可以使用@svgr/webpack，现在想要导入 svg 图像并将其与新next/image组件一起使用。

以下是我设置next.config.js文件的方法：

module.exports = {
  images: {
    domains: ["images.vexels.com"],
  },
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });

    return config;
  },
};

这就是我想做的：

import Image from 'next/image'
import Logo from '@/svg/logo.svg'

<Image src={Logo} width={174} height={84} />

但是，当我这样做时，我收到以下错误：

Unhandled Runtime Error
TypeError: src.startsWith is not a function

Source
client\image.tsx (278:13) @ Image

  276 | let isLazy =
  277 |   !priority && (loading === 'lazy' || typeof loading …

我正在使用 Prisma 2 创建模型，并希望为其中一个字段设置最小和最大长度。即，像这样：

model Post {
 ...
 title String @min(3) @max(240)
 ...
}

我刚刚编写了上面的语法。我想知道 Prisma 中是否存在类似的东西，如果存在，该怎么做。

有任何想法吗？

谢谢。

我正在尝试在 Firebase Cloud Functions 中设置计划函数。作为一个简单的测试，我尝试重新创建文档页面上显示的示例：

const functions = require('firebase-functions')

exports.scheduledFunction = functions.pubsub
  .schedule('every 5 minutes')
  .onRun(context => {
    console.log('This will be run every 5 minutes!')
    return null
  })

但是，当我运行时firebase serve --only functions，出现以下错误：

function ignored because the pubsub emulator does not exist or is not running.

知道为什么我会收到此消息以及如何修复它吗？

我正在尝试使用 React 和 Typescript 创建一个简单的汉堡菜单组件。我想要做的是将onClick事件处理程序作为道具传递给这个菜单组件。这是我目前拥有的代码：

function Hamburger({ onClick }) {
  return (
    <Box
      as="button"
      type="button"
      p="1"
      fontSize="2xl"
      color="gray.600"
      onClick={onClick}
      display={{ base: "block", lg: "none" }}
    >
      <HiOutlineMenu />
    </Box>
  )
}

然而，打字稿抱怨{onClick}正在传递的道具：

Binding element 'onClick' implicitly has an 'any' type

我认为我可以通过将鼠标悬停在组件onClick中的键上Box并查看所采用的类型来解决此问题onClick。将鼠标悬停在该键上会产生以下消息：

因此，我想将{onClick}prop 修改如下：

function Hamburger({ onClick }: React.MouseEventHandler | undefined) {

但这只会产生一个新错误{onClick}：

Property 'onClick' does not exist on type 'MouseEventHandler<Element> | undefined'.ts(2339)
var onClick: any

我现在不知道该怎么办。因此，我想知道 …

首先，观看这个解释我想做什么的视频可能会有所帮助：https : //www.loom.com/share/1447f9a8d5ea44b18d6e39a6ea65c469

话虽如此，这里有一个书面解释：

Ant Design Layout 组件可用于创建可切换的侧边栏——如文档中所示：https ://ant.design/components/layout/#components-layout-demo-custom-trigger

可以使相同的侧边栏具有响应性 - 如文档中所示：https : //ant.design/components/layout/#components-layout-demo-responsive

我将这两个功能结合在一起，并创建了一个响应式、可切换的侧边栏。在我的特定配置中，侧边栏在宽度低于 1200 像素时会缩小到 80 像素。

这一切正常。

我现在想做的是设置第二个断点（在我的例子中md是 768px的断点）。在那个断点处，我希望侧边栏缩小到 0 像素，但仍然可以通过标题中的触发器图标进行切换。

关于如何使用 Ant Design 设置第二个断点的任何想法？