我对Material UI @ next很陌生，我喜欢它支持样式化组件的事实。
但是，我正在努力通过样式化组件将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属性吗？
它使用样式化的组件工作，这是代码
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
谢谢
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句