Кнопка пользовательского интерфейса материала для укладки

Question

Привет, я только начал использовать Material UI, и мне трудно разрабатывать компоненты. Я создаю страницу входа и хочу, чтобы кнопка «Отправить» была расположена справа внизу. Если кто-то может помочь мне, это будет очень цениться, потому что кажется, что он наследует стили отовсюду, но там, где я хотел бы! Я попытался добавить

textAlign: 'right'

к buttonStyle, и это не работает. Я также попытался добавить

text-align: right;

к моей кнопке .form 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 на предмет переопределения стиля.

Для «кажется, что он наследует стили отовсюду»

Я предложу вам использовать стилевые компоненты вместо глобального css импорта, который везде запутался. Попробуйте это,

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, и ничего больше. Может потребоваться некоторое время, чтобы привыкнуть к этому, но это чрезвычайно полезно.