I cannot center the Button component in Material-UI using Styled Components - css

Question

I am quite new to Material UI # next, and I like the fact that it supports Styled Components.
However, I am struggling in aligning the Button component to the center through Styled Components. I only manage to align it by using the styles technique such as this:
const styles = {
container: {
textAlign: "center"
}
};
class Landing extends Component {
render() {
return (
...
<div style={styles.container}>
<Button variant="raised" color="primary">
I am a button
</Button>
</div>
);
}
}
This is something that I like to avoid, and instead use the Styled Components such as:
const Container = styled.div`
text-align: "center";
`;
However, for some reason it is not working although they look exactly identical. Can someone explain whether text-align and textAlign are pointing to the same CSS property?

Answer 1

It works using styled component here is the code
import React from 'react';
import Button from "react-bootstrap/es/Button";
import styled from 'styled-components';
const Container = styled.div`
text-align: center;
`;
class Landing extends React.Component {
render() {
return (
<Container>
<div>
<Button color="primary">
I am a button
</Button>
</div>
</Container>
)};
};
You have to wrap the styled component which you have taken. Here I've taken container and then inside the container, I've added the needed CSS.
For more information and usage about the styled component, you can visit this URL - https://www.styled-components.com/docs/basics
Thanks