樣式材質 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，而不會應用於其他任何東西。 習慣它可能需要一段時間，但它非常有用。