我不能使用Styled Components将Button组件置于Material-UI中

Question

我接下来是Material UI @的新手,我喜欢它支持Styled Components的事实.

但是,我正在努力通过Styled Components 将Button组件与中心对齐.我只能通过使用如下的样式技术来对齐它:

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>
    );
  }
}

这是我想要避免的,而是使用样式组件,例如:

const Container = styled.div`
  text-align: "center";
`;

但是,出于某种原因它虽然看起来完全相同但却无法正常工作.有人可以解释text-align和textAlign是否指向相同的CSS属性？

Answer 1

它使用样式组件这里是代码

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>
    )};
};

你必须包装你拍摄的样式组件.在这里我采用了容器,然后在容器内,我添加了所需的CSS.

有关样式化组件的更多信息和用法,您可以访问此URL - https://www.styled-components.com/docs/basics

谢谢