reactjs - 如何使用 useStyles 在 @material-ui 中编写 !important

Question

我正在使用metrial-ui. 我如何"!important"使用metrial-ui和UseStyles在 react.js 中编写？特别是对于值是数字的属性，例如宽度或高度。

为了使这一点更清楚，这是我的代码：

import React from 'react';

import { makeStyles } from '@material-ui/styles';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import { fontSize, textAlign } from '@material-ui/system';
import "../fonts/29LTAzer-Medium.ttf"
import "../Styles/card.css"

const useStyles = makeStyles({

  overrides: {
    MuiCardActions: {
      root: {
        display: 'flex',
        alignItems: "center",
        padding: 8,
        flexDirection: "row-reverse",
      },
    }
  },
  card: {
    width: 700,
    minHeight: 250,
    maxHeight: 250,
    backgroundColor: "#F9F9F9",
    color: "#3599B8 !important",
    borderRadius: 25,
    margin: 15,
    textAlign: 'right',
    fontFamily: "LTAzer-Regular",
  },
  bullet: {
    display: 'inline-block',
    margin: '0 2px',
    transform: 'scale(0.8)',
    fontFamily: "LTAzer-Regular",
  },
  title: {
    fontSize: 14,
    color: "#3599B8",
    fontFamily: "LTAzer-Medium",
  },
  pos: {
    marginBottom: 12,
    color: "#3599B8",
    fontFamily: "LTAzer-Regular",
  },
  button: {
    '&:hover': {
      backgroundColor: "#3599B8",
      border: "solid #3599B8",
    },
    color: "white",
    width: 80,
    marginLeft: 30,
    borderRadius: 15,
    fontSize: 15,
    border: 3,
    border: "solid #9DCB82",
    textAlign: "center",
    backgroundColor: "#9DCB82",
    // paddingRight: 50,
    flexDirection: "row-reverse",
    fontFamily: "LTAzer-Regular",
    justifyContent: "center"
  },
  desc: {
    textAlign: "right",
    direction: "rtl",
    fontFamily: "LTAzer-Regular",
    // wordBreak:"break-all",
    // overflowWrap:"break-word",
    whiteSpace: "&nbsp",
    wordWrap: "normal",
    textOverflow: "ellipsis",
    overflow: "hidden",
    display: "-webkit-box",
    // lineHeight:16,
    WebkitLineClamp: 2,
    WebkitBoxOrient: "vertical",
  },
  name: {
    fontFamily: "LTAzer-Medium",
    color: "#3599B8",
  }
});

例如，我如何制作width: 700, !important？

标签： reactjsmaterial-ui

Answer 1

您可以将number值更改为stringlike "700px !important"。请看这个例子：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles({
  root: {
    background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
    border: 0,
    width: "200px !important",// has changed to string value
    borderRadius: 3,
    boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
    color: "white",
    height: 48,
    padding: "0 30px"
  }
});

export default function App() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}