【问题标题】:How to add margin in materialize css?如何在物化CSS中添加边距?
【发布时间】:2020-04-16 22:05:27
【问题描述】:

我一直在阅读文档并试图了解其他人是否有同样的问题。但我找不到任何东西。有什么办法可以在按钮之间添加空间?现在他们就在彼此旁边。谢谢!

import React from "react";
import { connect } from "react-redux";

class Todo extends React.Component {

    state = {
        color:null
    }

    render() {

        let color;
        if(this.props.todo.priorityLevel === "3" ) {
             color = "#ff5252 red accent-2";
        } else if(this.props.todo.priorityLevel === "2") {
            color =  "#ff8a65 deep-orange lighten-2";
        } else {
            color = "#fff176 yellow lighten-2";
        }

        return(
            <div className={"card-panel " + color}>
                <div id="todoInfo">
                    <h2>{`Title: ${this.props.todo.todoTitle}`}</h2>
                    <span id="todoDescription">{`Description: ${this.props.todo.description}`}</span>
                    <span id="todoPriorityLevel">{`Priority Level: ${this.props.todo.priorityLevel}`}</span>
                </div>
                <div id="todoActions">
                    <button className="btn-floating btn-large cyan pulse actionButtons" onClick={()=>this.props.dispatch({type:"EDIT_TODO", id: this.props.todo.id})}>Edit</button>
                    <button className="btn waves-effect #d50000 red accent-4 pulse actionButtons" onClick={()=>this.props.dispatch({type:"DELETE_TODO", id: this.props.todo.id})}>Delete</button>
                </div>
            </div>

        )
    }
}

export default connect()(Todo);

【问题讨论】:

    标签: javascript css reactjs react-native materialize


    【解决方案1】:

    在第一个按钮上添加style={{ marginRight: '40px !important' }}

    或者,如果您使用&lt;a&gt; 标签而不是&lt;button&gt;,您可能会得到一个默认间隔

    【讨论】:

    • 我知道这种方法。只是想知道我是否可以通过物化来做到这一点以保持代码一致。但是谢谢!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-04-20
    • 2013-06-03
    • 1970-01-01
    • 2014-02-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多