样式材质 UI 按钮

Question

Hi I just started using Material UI and am having a hard time styling the components. I am building a sign in page and would like my Submit button to be all the way to the bottom right. If someone can help me out that would be greatly appreciated because it seems to be inheriting styles from everywhere else but where I would like to! I have tried adding

textAlign: 'right'

to buttonStyle and that does not work. I have also tried adding

text-align: right;

to my .form-button CSS. The only thing that affects anything is removing the .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;
}

Another main goal would be to avoid inline styling because I do prefer keeping it within my style sheet. But if not possible or too overly difficult, I will inline style (as I did with the background-color).

Answer 1

As keikai has mentioned in the comment, you may check the Documentation in this link material-ui.com/styles/basics for overriding style.

For 'it seems to be inheriting styles from everywhere else'

I will suggest you to use styled-components instead of global css import, which mess up everywhere. Try this,

npm install --save styled-components

It creates a css class that only apply to the component. Sample code:

 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

  `

Then wrap your component with

// your newly created styled div  
<MyDiv>

   // component that needs your style
   <MyComponent />

</MyDiv>

Your style will only be applied to MyDiv and MyComponent, and nothing else. It may took awhile to get used to it, but it is extremely useful.