小编Kat*_*ie7的帖子

我已经通过对内容进行硬编码成功实现了 Material UI 的选项卡，但是当我尝试使用 .map 函数制作硬编码选项卡以填充数据源（简单 json）中的内容时，它不再起作用。谁能明白为什么吗？我所做的唯一更改是下面的 MyTabs 组件，其中现在有两个 .map 函数而不是硬编码选项卡。

非常感谢您的帮助！

这是我的数据：

export const TabsData = [
  {
    tabTitle: 'Tab 1',
    tabContent: 'Hello 1',
  },
  {
    tabTitle: 'Tab 2',
    tabContent: 'Hello 2',
  },
  {
    tabTitle: 'Tab 3',
    tabContent: 'Hello 3',
  },
];

这是我的 MyTabs 组件：

import React, { useState } from 'react';

// Material UI
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';

// Data
import { TabsData } from '../../page-templates/full-page-with-tabs/FullPageWithTabsData';

//Components
import TabContentPanel from '../tabs/tab-content-panel/TabContentPanel';

const MyTabs = …

一、现貌

我有一个带有 4 个网格项目的 Material UI Grid 容器。在每个 Grid 项中都有一个 Typography 组件，其中包含一个标题和一个带有一些内容的 Card，如下所示：

2. 期望的外观

我希望卡片填充网格项目的剩余高度而不超过它。这是我想要的输出：

3.外观不良（卡高=100%）

我尝试将卡片的高度设为 100%，但这意味着每张卡片都采用其父级（网格项）的高度，并且父级的高度 = 版式 + 卡片（而不是剩余空间减去版式），所以结果是 Card 然后超过了父 Grid 项目的高度，如下所示：

克服这个问题的最佳方法是什么？我正在使用 Material UI 的 Grid 使断点变得简单并与我的项目的其余部分保持一致，因此理想情况下，解决方案将使用这种方法。

这是代码：

import React from 'react';

const useStyles = makeStyles(theme => ({
   // stretch: { height: '100%' }, // Un-commenting this results in undesirable appearance 3 (see image 3 above)
    outline: { border: '1px solid red' },
}));

const Sections= () => {
  const classes = useStyles();

  return …

我们有一个包含 HTML 代码的数据库，我们使用 React 将其显示在网页上，但需要对其进行解析。

我最初使用html-react-parser，但在代码审查后被要求使用危险的SetInnerHtml，因为它没有任何依赖项。

除了不使用危险的SetInnerHtml之外，我无法阐明使用 html-react-parser 的任何优点，但这是一个优点吗？如果是的话为什么？它是否以某种方式避免了危险，或者它们只是被隐藏起来了？

非常感谢，

凯蒂

我创建了一个表单，当用户进行选择时，我想将表单输入的值实时传递给同级组件。

我正在使用 react-hook-form 并且能够成功地使用watch来查看用户输入的值，但我只知道如何将其传递给孩子，而不是兄弟姐妹。

应用程序.js

这是家长

import React from 'react'
import Form from './Form';
import Message from './Message';

const App = () => {
  return (
     <div>
           <Form />
           <Message/>
     </div>
  );
};
export default App;

表单.js

这是孩子。

import React from 'react';
import { useForm } from 'react-hook-form';
import { Select, MenuItem } from '@material-ui/core';
import { Controller } from 'react-hook-form';

function Form() {

const {control, watch } = useForm();    
const watchDiet = watch('diet');

return(
   <form>
          <label htmlFor="diet">Dietary …

我有一个使用 Material UI 构建的 React 应用程序。我已经创建了自己的主题覆盖（请参阅下面的摘录），但字体的颜色需要是紫色 #391960，而不是 rgba(0, 0, 0, 0.87)。如何覆盖整个网站的默认字体颜色？

这是我的主题的摘录

import { createMuiTheme } from "@material-ui/core";

const theme = createMuiTheme({
  palette: {
     text: {
         light: "#ffffff",
          main: "#391960",
          dark: "#140b1d",
    },
});

export default theme;

我希望在 theme.js 文件中添加上述内容会导致所有字体颜色更改为 #391960，因为我尚未对组件内的字体应用任何样式。例如：

import theme from "./styles/theme";

<ThemeProvider theme={theme}>
        <Typography variant="h1" component="h1">
          Page Title
        </Typography>
</ThemeProvider>

但是，上述 Typography 组件中的文本仍保持深灰色。我成功地能够使用以下代码更改此版式组件的大小，因此这证明我正确地将主题拉入组件中：

  typography: {
    h1: {
      fontSize: "2rem",
      fontWeight: 700,
    },

如果我无法使用 theme.js 文件设置站点范围的颜色，我想我可以有一个全局样式表，以某种方式从主题中提取正确的颜色？例如（我知道这行不通！）

body {
 color: theme.palette.main
}

任何帮助，将不胜感激！

谢谢，

凯蒂