小编Jev*_*ran的帖子

如何向 nextjs 元素添加多个 className

我有一个无序列表元素,如下所示:

     <ul className={styles["projects-pd-subdetails-list"]}>
        {detail.subdetails.map((sub) => (
          <li
             className={styles["projects-pd-text projects-pd-subdetail"]}
          >
            {sub}
          </li>
        ))}
     </ul>
Run Code Online (Sandbox Code Playgroud)

使用普通的 React 元素,我可以为该li元素应用多个类,如下所示:

<li className="projects-pd-text projects-pd-subdetail">{sub}</li>
Run Code Online (Sandbox Code Playgroud)

然而,像我在 nextjs 中那样有一个空格意味着样式会被忽略。我怎样才能解决这个问题并正确解释我的li元素的两个类名?

javascript css reactjs next.js

41
推荐指数
3
解决办法
7万
查看次数

如何自定义 Material UI 选择组件?

我有一个需要自定义的 MUI 选择组件。我将其渲染在深色背景上,并且需要轮廓及其所有内容均为浅色(即灰色和白色)。

在此输入图像描述

我已设法将轮廓和文本内容设为浅色,但我不知道如何更改单击以打开和关闭选择选项的向下和向上箭头的颜色。如果你看我分享的屏幕截图,你几乎看不到向上箭头,因为它是黑色的。我该如何将其颜色更改为灰色或白色?

这就是我现在所拥有的:

<Select
    variant="outlined"
    sx={{
    width: 100,
    height: 40,
    marginRight: 15,
    border: "1px solid darkgrey",
    color: "#fff",
    }}
    value={currency}
    onChange={(e) => setCurrency(e.target.value)}
>
    <MenuItem value={"USD"}>USD</MenuItem>
    <MenuItem value={"INR"}>INR</MenuItem>
</Select>
Run Code Online (Sandbox Code Playgroud)

css reactjs material-ui

6
推荐指数
1
解决办法
2万
查看次数

将 onClick 功能添加到 React 待办事项列表

我用 React 创建了一个待办事项列表。我希望能够通过单击它们来标记已完成的任务。我还希望能够通过单击按钮清除已完成的任务。这两个函数在我设置的代码中无法正常工作。当我单击单个待办事项以将其标记为完成时,列表中的每个待办事项都会被标记为已完成,因此会显示一个“行通过”。当我然后单击指定的按钮清除已完成的任务时,绝对没有任何反应。有人可以帮我解决这两个问题吗?

来自 App 组件的代码:

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      todos: [
        {
          task: "learn how to fly drone",
          id: Date.now(),
          completed: false
        }, 
        {
          task: "learn React class components",
          id: Date.now(),
          completed: false
        },
        {
          task: "practice editing videos",
          id: Date.now(),
          completed: false
        },
        {
          task: "read Ten Years A Nomad",
          id: Date.now(),
          completed: false
        }
    ],
      todo: ''
    }
  }

  inputChangeHandler = event => {
    this.setState({[event.target.name]: event.target.value})
  }

  addTask = event …
Run Code Online (Sandbox Code Playgroud)

javascript arrays onclick reactjs

1
推荐指数
1
解决办法
2955
查看次数

标签 统计

reactjs ×3

css ×2

javascript ×2

arrays ×1

material-ui ×1

next.js ×1

onclick ×1