我在应用一些自定义样式语义UI react组件时遇到了麻烦。
我想在网格内实现以下布局。如图所示,没有网格边框,左侧垂直图标,主图像和标题对齐。这些文档对执行此操作不是很有帮助-希望有人可以帮助我。
以下代码的当前外观
组件
export const HomepageHeading = ({ mobile }) => (
<Container
text
style ={{
paddingTop: '2em'
}}
>
<Grid celled
style={{
borderWidth: '0',
}}
>
<Grid.Row>
<Grid.Column width={6}>
<Image
src='https://react.semantic-ui.com/images/wireframe/square-image.png'
size='medium'
circular
centered
/>
</Grid.Column>
<Grid.Column width={10}>
<Header
as='h3'
content='Gareth Veale'
textAlign='left'
style={{
fontSize: mobile ? '1em' : '2em',
fontWeight: 'normal',
color: 'black'
}}
/>
<Header
as='h4'
content='Software Engineer.'
textAlign='left'
style={{
fontSize: mobile ? '0.75em' : '1em',
fontWeight: 'normal',
marginTop: mobile ? '0.5em' : '1.5em',
marginBottom: mobile ? '0.5em' : '1.5em',
color: 'black'
}}
/>
<p
style={{
fontSize: mobile ? '0.5em' : '0.75em',
}}>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus.
</p>
<Container>
<Icon name='twitter' />
<Icon name='github' />
<Icon name='mail' />
</Container>
</Grid.Column>
</Grid.Row>
</Grid>
</Container>
)