有没有办法增加 material-ui 中轮廓按钮的边框厚度？-解网

问：

我正在对使用 Material-UI 组件设计的用户界面进行更改，并且我被要求使某些轮廓按钮的边框更宽。有没有办法使用组件道具、主题或样式来实现这一点？

这是我尝试绘制的两个按钮的代码，以及我当前使用的样式和主题：

const style = {
  play: {
    margin: 5,
    padding: 0,
    colorInherit: 'linear-gradient(45deg, #38e438 30%, #58e458 90%)',
  },
  play_disabled: {
    margin: 5,
    padding: 0,
    background: '#222',
  },
  clear: {
    margin: 5,
    marginRight: 10,
    padding: 0,
    background: 'linear-gradient(45deg, #FE3B3B 30%, #FF3B3B 90%)',
   },
  clear_disabled: {
    margin: 5,
    marginRight: 10,
    padding: 0,
    background: '#222',
  },
  default: {
    margin: 2,
    padding: 0,
    color: '#fff',
  },
  disabled: {
    margin: 2,  
    padding: 0,
    color: '#777',
  },
};
const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#777",
    }
  }
});
<MuiThemeProvider theme={theme}>
  <Tooltip title="Render" placement="bottom-start">
    <Button
      id="play-btn"
      variant="outlined"
      size="small"
      onClick={this.handleRender}
      color="primary"
      className="header-btn"
      style={this.props.layoutType === layoutTypes.REFERENCE ? style.play_disabled : style.play}
      disabled={this.props.layoutType === layoutTypes.REFERENCE}>
      <Icon className="material-icons" style={{ color: '#777' }}>play_arrow</Icon>
    </Button>
  </Tooltip>
  <Tooltip title="Stop" placement="bottom-start">
    <Button
      id="stop-btn"
      variant="outlined"
      size="small"
      onClick={this.clear}
      color="primary"
      className="header-btn"
      style={this.props.layoutType === layoutTypes.REFERENCE ? style.clear_disabled : style.clear}
      disabled={this.props.layoutType === layoutTypes.REFERENCE}>
      <Icon className="material-icons" style={{ color: '#777' }}>stop</Icon>
    </Button>
  </Tooltip>
</MuiThemeProvider>

这就是它现在的样子：https://i.stack.imgur.com/PnuAD.jpg。我只是想让边框厚一点，我将不胜感激。谢谢！

javascript reactjs material-ui


const useStyles = makeStyles(theme => ({
  button: {
    margin: theme.spacing(1),
    border: '2px solid'
  }
}));

function ThickerButton() {
  return (
    <>
      <Button
        variant="outlined"
        color="primary"
        style={{ border: '2px solid' }}
      >
        style
      </Button>
      <Button className={useStyles().button} variant="outlined" color="primary">
        makeStyles
      </Button>
    </>
  );
}

演示：

上一个：在 Android sqlite 上加载 ICU 扩展以解决 LIKE 小写问题

下一个：如何在移动视口的material-ui中隐藏标签文本？

有没有办法增加 material-ui 中轮廓按钮的边框厚度？

Is there a way to increase the border thickness of outlined buttons in material-ui?

评论