Question

这是我第一次使用Material UI（我也是反应一般的菜鸟），我似乎无法更改正在使用的拨动开关的大小。

这是我到目前为止的内容-减去所有不相关的内容：

import React, { Component } from "react";
import Switch from "@material-ui/core/Switch";


const styles = {
  root: {
    height: "500",
  },
};

class ToggleActive extends Component {
  state = {
    checked: true,
  };

  handleChange = name => event => {
    this.setState({ [name]: event.target.checked });
  };

  render() {
    return (
      <label htmlFor="normal-switch">
        <Switch
          classes={styles.root}
          checked={this.state.checked}
          onChange={this.handleChange("checked")}
        />
      </label>
    );
  }
}

export default ToggleActive;

我只想把它放大一点，然后改变颜色。任何帮助将不胜感激！

Answer 1

要更改开关组件的大小，必须在根目录更改CSS样式：

  enum: 'primary' |'secondary' | 'default'

由于材质UI组件API用于更改开关的颜色，您需要在Switch JSX标签中添加颜色道具并从以下枚举中进行选择：

<Switch
      classes={styles.root}
      checked={this.state.checked}
      onChange={this.handleChange("checked")}
      color='primary'
    />

您的Switch应该像这样：

  <div *ngFor="let question of stage.questions" class="col-lg-10 col-md-10 col-sm-12 col-xs-12 section-padding"
        [class.fadeIn]="stage.discount == discountStage" [class.fadeOut]="stage.discount != discountStage" [class.none]="stage.none">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding:0px">
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" style="padding:0px;font-weight:bold;min-height:50px;">
                    <div style="padding-top:10px;"><span>{{question.content}}</span> <span *ngIf="question.required" title="שדה חובה">*</span>
                    </div>
                </div>

            <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12" style="padding:0px;min-height:50px;">
              <div *ngIf="!question.multiAnswers && (question.type == 'input' || question.type == 'email') && stage.index == getCurrentStage()"
                        >
                      <input [id]="'calcq' + question.id" ng-attr-type="text" class="form-control" ng-attr-value="getText(question)"
                                (keyup)="handleKeyUp(question, $event);" (blur)="handleBlur(question, $event)" [class.disabled]="isDisabled(question)"
                             ng-attr-placeholder="getPlaceholder(question)" aria-describedby="basic-addon1">
                        <i class="fa fa-remove error-point" [class.none]="!question.requiredError" data-toggle="tooltip" data-placement="top" [title]="getRequiredText(question)"></i>
                        <i class="fa fa-remove error-point" *ngIf="question.accept == 'number'" [class.none]="!question.acceptError" data-toggle="tooltip" data-placement="top" title="יש להזין מספר בלבד"></i>
                        <i class="fa fa-remove error-point" *ngIf="question.accept == 'decimal'" [class.none]="!question.acceptError" data-toggle="tooltip" data-placement="top" title="יש להזין מספר בלבד"></i>
                        <i class="fa fa-remove error-point" *ngIf="question.accept == 'alpha'" [class.none]="!question.acceptError" data-toggle="tooltip" data-placement="top" title="יש להזין אותיות בלבד"></i>
                        <i class="fa fa-remove error-point" *ngIf="question.id == '1.0'" [class.none]="!question.emailError" data-toggle="tooltip" data-placement="top" title="יש להזין כתובת אימייל תקינה"></i>
                        <span>{{getText(question)}}</span>
                    </div>
                </div>
            </div>
        </div>

Answer 2

更改 Switch 样式，它需要一些详细的样式。我在不太明显的部分添加了一些注释：

import {createStyles, makeStyles, Switch, Theme} from '@material-ui/core';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      width: 54,
      height: 40,
      padding: 0,
      margin: theme.spacing(1),
    },
    switchBase: {
      padding: 1,
      '&$checked': {
        // This is the part that animates the thumb when the switch is toggled (to the right)
        transform: 'translateX(16px)',
        // This is the thumb color
        color: theme.palette.common.white,
        '& + $track': {
          // This is the track's background color (in this example, the iOS green)
          backgroundColor: '#52d869',
          opacity: 1,
          border: 'none',
        },
      },
    },
    thumb: {
      width: 36,
      height: 36,
    },
    track: {
      borderRadius: 19,
      border: `1px solid ${theme.palette.grey[300]}`,
      // This is the background color when the switch is off
      backgroundColor: theme.palette.grey[200],
      height: 30,
      opacity: 1,
      marginTop: 4,
      transition: theme.transitions.create(['background-color', 'border']),
    },
    checked: {},
    focusVisible: {},
  })
);

您可以将其实现为功能组件：

import React, { useState } from 'react';
// import {createStyles, makeStyles, ...

// const useStyles = makeStyles((theme: Theme) => ...

export const ToggleItem: React.FC = () => {
  const styles = useStyles();
  const [toggle, setToggle] = useState<boolean>(false);

  return (
    <Switch
      classes={{
        root: styles.root,
        switchBase: styles.switchBase,
        thumb: styles.thumb,
        track: styles.track,
        checked: styles.checked,
      }}
      checked={toggle}
      onChange={() => setToggle(!toggle)}
      name={title}
      inputProps={{'aria-label': 'my toggle'}}
    />
  );
};

如何在Material UI中更改拨动开关的大小

2 个答案: