Question

我正在使用Material UI构建React App。

如果该按钮被禁用，则为灰色且不透明。我希望它以主题为原色和不透明。

这就是我尝试过的：

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const styles = theme => ({
  button: {
    ":disabled": {
      backgroundColor: theme.palette.primary || 'red'
    }
  }
});

function ContainedButtons(props) {
  const { classes } = props;
  return (
    <div>
      <Button
        variant="contained"
        color="secondary"
        disabled
        className={classes.button}
      >
        Disabled
      </Button>
    </div>
  );
}

ContainedButtons.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(ContainedButtons);

但是按钮保持灰色。如何更改禁用元素的样式？

Answer 1

您可以定义要应用于禁用按钮的类：

const styles = theme => ({
  disabledButton: {
    backgroundColor: theme.palette.primary || 'red'
  }
});

然后，像这样使用它：

<Button
  variant="contained"
  color="secondary"
  disabled
  classes={{ disabled: classes.disabledButton }}
>
  Disabled
</Button>

您可以在documentation all the classes中找到可以覆盖的内容。

Answer 2

棉结答案是正确的，但我将添加更多详细信息。

首先，您应该导入createMuiTheme和ThemeProvider：

import { createMuiTheme } from '@material-ui/core/styles'
import { ThemeProvider } from '@material-ui/styles';

创建主题：

const theme = createMuiTheme({
  palette: {
    action: {
      disabledBackground: 'set color of background here',
      disabled: 'set color of text here'
    }
  }
});

包装按钮：

<ThemeProvider theme={theme}>
  <Button color="primary">Primary</Button>
</ThemeProvider>

Answer 3

您可以为按钮禁用类添加样式，例如：

.Mui-disabled { background-color: blue; }

您还可以在 https://material-ui.com/api/button/

上查看可以使用哪些其他类来设置按钮样式

Answer 4

或者您可以尝试import { createMuiTheme } from '@material-ui/core/styles' const theme = createMuiTheme({ palette: { action: { disabledBackground: 'set it here' } } }并自定义以下属性：

<!--  FORM SECTION STARTS HERE---- -->
  <section id="contact">
    <div class="container">
        <div class="row">
            <div class="col-md-12"> 
                <h3 class="h3-complete-form">Just complete the form below.</h3>
           </div>
         </div>
    </div>

<form class="form-horizontal" role="form" method="post" action="contact.php">

<div class="row">
   <div class="col-sm-3"></div>
      <div class="contact-icon">
        <i class="fas fa-user"></i>
      </div>

     <div class="form-inline">
       <div class="col-sm-2 form-group">
           <label for="name" class="control-label">Name</label>
             <input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name">

            <?php 
            echo $errName;?>
       </div>
   </div>
</div>

  <div class="row">
      <div class="col-sm-3"></div>
         <div class="contact-icon">
            <i class="fas fa-envelope"></i>
         </div>

        <div class="form-inline">
            <div class="col-sm-2 form-group">
          <label for="email" class="control-label">Email</label>
              <input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com">
              <?php 
              echo $errEmail;?>
          </div>
     </div>
  </div>
</div>
</div>

<div class="row">
  <div class="col-sm-3"></div>
    <div class="contact-icon">
      <i class="fas fa-pencil-alt"></i>
   </div>

   <div class="form-inline">
      <div class="col-sm-10 form-group">
          <label for="message" class="control-label">Message</label>
          <textarea class="form-control" rows="4" name="message"
             placeholder="How can I help you?">
             <?php 
             echo $errMessage;?>
        </div>   
   </div>
</div>


<div class="row">
    <div class="col-sm-3"></div>
      <div class="contact-icon">
        <i class="fas fa-pencil-alt"></i>
</div>

    <div class="form-inline">
        <div class="col-sm-10 form-group">
            <label for="human" class="control-label">2 + 3 = ?</label>
          <input type="text" class="form-control" id="human" name="human" placeholder="Your Answer">
          <?php echo $errHuman";?>
            </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-4"></div>
    <div class="form-inline">
    <div class="form-group">
            <input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
            <?php echo $result; ?> 
     </div>
   </div>
</div>
</div>

    <!-- Displays an alert to user -->
<div class="row">
   <div class="form-group">
        <div class="col-sm-10 col-sm-offset-2">
          <?php echo $result; ?>    
    </div>
  </div>
</div>
</form>

 </div>
</div>
<!-- --------- SECTION 8: CONTACT ME ENDS HERE------ -->


PHP DOC


<?php include 'validate.php'; ?>

<?php
    if (isset($_POST["submit"])) {
        $name = $_POST['name'];
        $email = $_POST['email'];
        $message = $_POST['message'];
        $human = intval($_POST['human']);
        $from = "From: ". $name . " <" . $email . ">\r\n";
        $to = 'myname@myemailaddress.com'; 
        $subject = 'Message from Contact Form';

        $body ="From: $name\n E-Mail: $email\n Message:\n $message";
        // Check if name has been entered
        if (!$_POST['name']) {
            $errName = 'Please enter your first and last name';
        }

        // Check if email has been entered and is valid
        if (!$_POST['email'] || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
            $errEmail = 'Please enter a valid email address';
        }

        //Check if message has been entered
        if (!$_POST['message']) {
            $errMessage = 'Please enter your message';
        }
        //Check if simple anti-bot test is correct
        if ($human !== 5) {
            $errHuman = 'Your anti-spam answer is incorrect';
        }
// If there are no errors, send the email
if (!$errName && !$errEmail && !$errMessage && !$errHuman) {
    if (mail ($to, $subject, $body, $from)) {
        $result='<div class="alert alert-success">Thank You! I will be in touch</div>';
    } else {
        $result='<div class="alert alert-danger">Sorry there was an error sending your message. Please try again later.</div>';
    }
}
    }
?>

React Material UI：禁用后如何为按钮提供自定义颜色？

4 个答案: