时间戳

首页 > 解决方案 > React 条件渲染高度问题

css - React 条件渲染高度问题

问题描述

我的应用在元素中使用了大量的条件渲染。我一直遇到的问题是表单无法识别条件渲染部分的高度。此外，我在表单底部的 2 个按钮在开发控制台中显示的高度不正确。据我所知，表格高度似乎在第一个条件之后被切断。我觉得我在这里遗漏了一些东西，但就是想不通。下面的按钮代码和样式的小片段。

<div className={classes.btnDiv}>
    <Button
        className={classes.resetBtn}
        vaiant="contained"
        color="default"
        onClick={handleResetBtnClick}
    >
        Reset
    </Button>
    <Button
        className={classes.submitBtn}
        variant="contained"
        color="primary"
        type="submit"
    >
        Start
    </Button>
</div>

样式是：

btnDiv: {
        marginTop: "8px",
        minHeight: "30px"
    },
submitBtn: {
        width: "45%",
        fontWeight: "600",
        backgroundColor: "#02578e",
        float: "right",
        '&:hover': {
            backgroundColor: "#213455"
        }
    },
    resetBtn: {
        width: "45%",
        fontWeight: "600",
        backgroundColor: "#d6d9db",
        float: "left",
        '&:hover': {
            backgroundColor: "#949baa"
        }
    },

让我知道条件句是否有用……我把它们排除在外是因为它们只是{boolean && <a few components>}

标签： cssreactjsmaterial-ui

解决方案

令人尴尬的是，这不是反应问题（感谢@StefanBob！）。这实际上只是我在工作中的平庸 CSS 技能！无法正确显示的原因是float表单 CSS 中的各种属性。移除浮标会导致所有东西在高度方面都能很好地发挥作用。查看帖子评论以查看他们的解释。

推荐阅读