小编Jon*_*y B的帖子

前言

几天前我问了一个类似的问题，虽然本质上是相关的，但我相信解决方案最终会有所不同，所以我在另一个线程中再次询问。

CodeSanbox示例（已更新以反映已接受的答案）

问题：

我希望通过classNameprop 传入的任何外部样式都比我的自定义组件内部样式具有更高的特异性。这样，使用它的人就可以调整边距和填充。但是，我的组件默认内部样式正在覆盖我的外部样式，我希望它是相反的。

细节：

我正在创建一个基于material-ui 之上的自定义组件库。我想让自定义组件 api 类似于@material-ui这样我们的开发人员会发现它们更易于使用。我正在构建的每个组件都有自己的内部样式，覆盖默认的material-ui样式，在本例中它被定义为 class button。另外，就像@material-ui我接受一个 color prop一样<TestButton color={'default'}/>。最后，如果需要的话，我希望允许用外部样式覆盖我的自定义按钮。我正在使用该clsx库来构建 className 字符串。

代码：

import React, { useState } from "react";
import { makeStyles } from "@material-ui/styles";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import { Button } from "@material-ui/core";
import clsx from "clsx";

const useAppStyles = makeStyles({
  gButton: { margin: "150px" }
});

export default …

我已经开始了一个使用rails newwith的 rails 项目--webpack=react。

我在database.yml 中生成了一个新控制器更新了我的PostgreSQL 密码。

到目前为止，一切正常。在这一点上，我要做的就是让 react 呈现默认的 hello_react.jsx 文件，该文件是由 rails 生成的示例文件。

当我放入<%= javascript_pack_tag 'hello_react' %>视图并运行服务器时，出现以下错误：

Webpacker::Manifest::MissingEntryError in Home#index 显示 G:/../../../myGroceryList/app/views/home/index.html.erb 其中第 1 行出现：

Webpacker can't find hello_react.js in G:/../../../myGroceryList/public/packs/manifest.json. Possible causes:

You want to set webpacker.yml value of compile to true for your environment unless you are using the webpack -w or the webpack-dev-server. webpack has not yet re-run to reflect updates. You have misconfigured Webpacker's config/webpacker.yml file. Your webpack configuration …

我正在使用 plaid 尝试从关联帐户获取交易。在沙箱中，我没有遇到任何错误，但是一旦进入开发阶段，我就开始seeing "ITEM_LOGIN_REQUIRED"尝试获取交易。我正在使用 plaid react 组件和 plaid ruby​​ gem。我怀疑我的代码中没有像通过 Plaids api 的流程那样多的错误，如下所示

用户与链接交互 -> 使用凭据登录帐户 -> 帐户已链接并返回 public_token -> public_token 交换存储在数据库中的 access_token -> access_token 用于查找交易 -> Plaid 返回错误。-> 引导用户完成更新模式 -> 查找交易 -> 错误 -> 冲洗并重复。

下面是我查找交易的地方以及出现错误的地方。

    start_date = Date.new(date[0].to_i, date[1].to_i, 1).strftime('%Y-%m-%d')
    end_date = Date.new(date[0].to_i, date[1].to_i, -1).strftime('%Y-%m-%d')

    plaid_env = Rails.application.config.plaid_env
    client_id = Rails.application.config.client_id
    secret = Rails.application.config.secret
    public_key = Rails.application.config.public_key

    client = Plaid::Client.new(env: plaid_env,
                               client_id: client_id,
                               secret: secret,
                               public_key: public_key)

    transaction_response = client.transactions.get(access_token, start_date, end_date)

    transactions = transaction_response.transactions

我有一个父功能组件<EditCard/>，它是在选择编辑表行按钮时打开的模态。此编辑卡包含一个名为的状态变量data，该变量由正在编辑的表行中的数据组成。我正在<EditCard/>使用useState钩子设置/修改状态。

<EditCard/>有一个子组件<CategoryDropdown/>，它是一个下拉列表，它接受一个 propdata.assignCategory作为它的选定值，还有一个回调handleChange()，它data用从下拉列表中选择的值更新状态值。

当我从下拉列表中选择一个新值时，会handleChange()被调用并被setData()调用，我看到状态正在更新，但<CategoryDropdown/>没有使用新的选定值重新呈现。

编辑卡组件代码

export default function EditCard(props) {
    const [data, setData] = useState(props.data);

    const handleChange = () => event => {
        let d = data;
        d.assignCategory = event.target.value;
        setData(d);
    };

    let assignCategoryCol = data.assignCategory !== undefined ? <AssignCategoryCol data={data} handleChange={handleChange}/> : <></>;

    return (
        <div>
            {assignCategoryCol}
            <Button>Update</Button>
        </div>
    )
}

{props.data.bucketTotal}`} <Lock/></Typography>)
};

const AssignCategoryCol …

我正在尝试使用 Material-UI 的withStyles方法实现一些样式，但是我无法将类作为道具。关于我缺少什么的任何建议？我在下面包含了相关代码，但请注意，<App>为简洁起见，我在此文件中省略了一个组件。

import React from 'react'
import ReactDOM from "react-dom";
import {Paper, Typography} from '@material-ui/core'
import {withStyles} from '@material-ui/core/styles'
import NavBar from "./navBar";

class Recipe extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        console.log('Recipe Did Mount')
    }

    render() {
        const {recipeData, classes} = this.props;
        return (
            <Paper>
                <Typography className={classes.recipeName}>{recipeData.name}</Typography>
                <Typography className={classes.recipeIngredients}>{recipeData.ingredients}</Typography>
                <Typography className={classes.recipeInstructions}>{recipeData.instructions}</Typography>
            </Paper>
        )
    }
}

const styles = {
    root: {
        fontSize: "1.0rem",
        margin: "0px"
    },
    recipeName: {
        fontSize: "1.0rem",
        margin: "0px" …