样式材质 UI 按钮

Question

嗨，我刚刚开始使用 Material UI，并且很难为组件设计样式。 我正在构建一个登录页面，并希望我的提交按钮一直位于右下角。 如果有人可以帮助我，那将不胜感激，因为它似乎从其他地方继承了样式，但我想要的地方！ 我试过添加

textAlign: 'right'

到 buttonStyle ，这不起作用。 我也试过添加

text-align: right;

到我的 .form-b​​utton CSS。 唯一影响任何事情的是删除 .App Login.js

<div className='form-container'>
  ...
  <Button
    style={buttonStyle}
    className='form-button'
    variant='contained'>
    Log-In
  </Button>
</div>
...
const buttonStyle = {
  backgroundColor: '#527354'
};

应用程序.css

.App {
  text-align: center;
}

.form-button {
  width: 83px;
  height: 36px;

  box-shadow: 0px 1px 3px #00000033;
}

.MuiButton-label {
  color: var(--primary-white);
  font-family: 'Open Sans', sans-serif;
}

.form-container {
  max-width: 400px;
  margin: 2rem auto;
  overflow: hidden;
  padding: 0 2rem;
}

另一个主要目标是避免内联样式，因为我更喜欢将它保留在我的样式表中。 但如果不可能或过于困难，我将内联样式（就像我对背景颜色所做的那样）。

Answer 1

正如 keikai 在评论中提到的，您可以查看此链接 material-ui.com/styles/basics 中的文档以了解覆盖样式。

因为“它似乎继承了其他地方的风格”

我会建议你使用 styled-components 而不是 global css import，它到处都是乱七八糟的。 尝试这个，

npm install --save styled-components

它创建了一个仅适用于组件的 css 类。 示例代码：

 import styled from 'styled-components'

 const MyDiv = styled.div`// can be span, section, etc

 // add your style here for the div
 your div style(optional)

 // your class css inside the div
 .form-container {
    max-width: 400px;
    margin: 2rem auto;
    overflow: hidden;
    padding: 0 2rem;
  }

  // add more class if you have any

  `

然后用你的组件包裹

// your newly created styled div  
<MyDiv>

   // component that needs your style
   <MyComponent />

</MyDiv>

您的样式将仅应用于 MyDiv 和 MyComponent，而不会应用于其他任何东西。 习惯它可能需要一段时间，但它非常有用。