我无法使用 Styled Components 在 Material-UI 中将 Button 组件居中

Question

我对 Material UI @ next 很陌生，我喜欢它支持样式化组件这一事实。

但是，我正在努力通过样式化组件将 Button 组件与中心对齐。我只能通过使用 styles 技术来对齐它，例如：

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

您必须包装您使用的样式组件。在这里，我使用了 container 然后在容器中添加了所需的 CSS.

关于样式组件的更多信息和用法，您可以访问这个URL - https://www.styled-components.com/docs/basics

谢谢

我无法使用 Styled Components 在 Material-UI 中将 Button 组件居中

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

css

reactjs

material-ui

styled-components