Question

您好，我刚刚开始使用Material UI，并且很难对组件进行样式设计。我正在构建一个登录页面，希望我的“提交”按钮一直到右下角。如果有人可以帮助我，将不胜感激，因为它似乎是从其他地方继承的样式，但我想在任何地方继承！我尝试添加

textAlign: 'right'

到buttonStyle，那是行不通的。我也尝试添加

text-align: right;

到我的.form-button CSS。唯一会影响任何内容的事情是删除.App Login.js

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

App.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中查看文档以替代样式。

对于“它似乎正在从其他地方继承样式”

我建议您使用样式化的组件，而不是使用全局css导入，因为这会导致混乱。试试这个，

npm install-保存样式化组件

它将创建一个仅适用于组件的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，而没有其他样式。可能需要一段时间才能习惯它，但这非常有用。

样式材质UI按钮

1 个答案: