小编Mos*_*she的帖子

我是 Material ui 的新手，无法弄清楚如何在工具栏上分隔排版组件。我制作了一个短视频来展示我的问题：https : //www.useloom.com/share/f2c391c010c142b4b659d805afe8c825

有人知道怎么做吗？

谢谢。

我有一个使用样式化组件创建的导航栏组件。我想创建一些可以更改背景颜色和/或文本颜色的道具。

例如： <Navbar dark>应该具有以下CSS：

background: #454545;
color: #fafafa;

而<Navbar light>应该相反：

background: #fafafa;
color: #454545;

但是，如果没有使用任何道具，那么我想使用默认的背景和文本颜色-例如（出于演示目的），如下所示：

background: #eee;
color: #333;

现在，我的问题是如何在样式化组件中进行设置。

我可以执行以下操作：

background: ${props => props.dark ? #454545 : '#eee'}
background: ${props => props.dark ? #fafafa : '#eee'}
background:  #eee;

和类似的颜色。

但这是多余的，不是很优雅。我想要某种if / else语句：

background: ${ props => { 
  if (props.dark) { #454545 }
  elseif (props.light) { #fafafa }
  else { #eee }
}

但是我不知道如何在样式化组件中设置类似的内容。

有什么建议么？

提前致谢。

我在 React 中创建了以下上下文：

import { useBoolean } from "@chakra-ui/react"
import { createContext, FC } from "react"

type useBooleanReturn = ReturnType<typeof useBoolean>

export const MobileContext = createContext<
  [show: useBooleanReturn[0], setShow: useBooleanReturn[1]] | undefined
>(undefined)

// --- PROVIDER
const MobileProvider: FC = ({ children }) => {
  const [show, setShow] = useBoolean()

  return (
    <MobileContext.Provider value={[show, setShow]}>
      {children}
    </MobileContext.Provider>
  )
}

export default MobileProvider

到目前为止一切都很好，但是当我尝试使用这个上下文时，结果发现正在传递的是undefined. 也就是说，下面的代码中value是未定义的：

const value = React.useContext(MobileContext)

不过，我不知道为什么会这样，因为我useBoolean在设置上下文时使用了钩子——即这一行： const [show, setShow] = useBoolean() …

想象一下,我创建了一个数组,如下所示:

var arr1 = ['one', 'two', 'three'];

我现在想要创建另一个这样的数组:

var arr2 = [arr1, 'four', 'five']

现在这是arr2的内容:

[Array(3), "four", "five"]

那不是我想要的.我希望内容看起来像这样:

['one', 'two', 'three', 'four', 'five']

我怎样才能做到这一点？

注意,我不是在寻找像concat这样的函数,而是一种将arr1列为arr2中的项目的方法,这样arr1中的所有项目都将作为单独的项目添加到arr2中(我希望这是有意义的) .

感谢您提供的任何帮助.

我使用 React hooks 创建了一个简单的下拉菜单。它按照我想要的方式工作，但有一个例外——它会立即打开所有下拉菜单。这是有道理的，因为我使用的是用于所有下拉实例的单一状态：

const [open, setOpen] = useState(false)

然后，每当有人单击下拉菜单时，我都会使用 onClick （和 onBlur）来设置状态：

onClick={() => setOpen(state => !state)}
onBlur={() => setOpen(false)}

当open设置为时true，下拉菜单设置为display: block;。当它为 false 时，它​​被设置为display: none; This is set in the css (using Styled Components)。

因此，这对于单个下拉菜单来说一切正常 - 问题是，下拉菜单的每个实例都连接到 的状态open。这意味着如果 open 设置为 true，则每个下拉菜单都会显示 - false，则不显示。

如何修改下拉菜单，以便只能切换正在单击的下拉菜单？

谢谢。