Question

我有一个HomepageHeading呈现在我应用程序页面的顶部。我在<Header>内使用自定义图片，并尝试调整尺寸，使其相当大。

<Image>采用了大小尺寸，因此我将其设置为massive，如下所示。它的作用相反，并且不会使图像比我将其设置为tiny时大得多。我提供了sandbox的视觉效果。

这是错误还是我错误地设置了道具？包裹在<Image>中的<Header>的行为可能有所不同吗？

const HomepageHeading = ({ mobile }) => (
  <Container text>
    <Header
      as="h1"
      inverted
      style={{
        fontSize: mobile ? "2em" : "4em",
        fontWeight: "normal",
        marginBottom: 0,
        marginTop: mobile ? "1.5em" : "3em"
      }}
    >
      <Image
        size="massive"
        src="https://react.semantic-ui.com/images/avatar/large/patrick.png"
      />
    </Header>

    <Header
      as="h2"
      content="Something"
      inverted
      style={{
        fontSize: mobile ? "1.5em" : "1.7em",
        fontWeight: "normal",
        marginTop: mobile ? "0.5em" : "1.5em"
      }}
    />
  </Container>
);

Answer 1

您是对的，Header组件包含的样式将覆盖Image size属性所应用的样式。

我看到Header正在添加Dim cmd As New SqlCommand("select numero from database", cn) Dim da As New SqlDataAdapter(cmd) Dim dt2 As New DataTable da.Fill(dt2) datagridview1.DataSource = dt2的宽度，以覆盖大规模道具所尝试设置的2.5em。

要使图像具有所需的尺寸，您将必须对其应用自己的样式。

尝试将以下内容添加到图像：

960px

Answer 2

在更新我的语义用户界面反应依赖性之后，我遇到了这个问题。 <Image>内的<Header>看起来总是像size='tiny'。我将此行为归结为该规则

.ui.header>img {
  width: 2.5em 
}

解决方案

我只是希望<Image>的size属性能够照常工作，所以我在其中一个个人样式表中添加了替代项。

/* Semantic UI override */
.ui.small.image {
    width: 150px !important;
}

唯一的附加内容是末尾的!important修饰符。现在size='small'可以像正常一样在我的<Image>上工作。瞧！

语义UI反应图像元素上的大小道具

2 个答案: