如何在Vanilla Extract中为第一个表格单元格添加样式?

huangapple go评论60阅读模式
英文:

How to style first table cell in Vanilla Extract?

问题

我正在尝试在Vanilla Extract中创建一个圆角的<tbody>,但很难理解如何选择特定的子元素。

如何选择tbody tr:first-child td:first-child

table {
  border-collapse: separate;
}

tbody td {
  border-width: 5px;
  border-color: red;
  border-style: solid;
}

tbody tr:first-child td:first-child {
  border-color: black;
  color: white;
  background-color: red;
  border-radius: 1rem 0 0 0;
}
<table>
  <thead>
    <tr>
      <td>Wong</td>
      <td>Loo</td>
      <td>See</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
    <tr>
      <td>Son</td>
      <td>Woo</td>
      <td>Bee</td>
    </tr>
    <tr>
      <td>Tom</td>
      <td>Soon</td>
      <td>Tree</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td colspan="2">$1 million</td>
    </tr>
  </tfoot>
</table>

请注意,以上是你提供的代码和文本的翻译部分。

英文:

I am trying to make a rounded &lt;tbody&gt; in Vanilla Extract but having a hard time understanding how to select specific children.

How does one select tbody tr:first-child td:first-child?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

table {
  border-collapse: separate;
}

tbody td {
  border-width: 5px;
  border-color: red;
  border-style: solid;
}

tbody tr:first-child td:first-child {
  border-color: black;
  color: white;
  background-color: red;
  border-radius: 1rem 0 0 0;
}

<!-- language: lang-html -->

&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;td&gt;Wong&lt;/td&gt;
        &lt;td&gt;Loo&lt;/td&gt;
      &lt;td&gt;See&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;One&lt;/td&gt;
      &lt;td&gt;Two&lt;/td&gt;
      &lt;td&gt;Three&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Son&lt;/td&gt;
      &lt;td&gt;Woo&lt;/td&gt;
      &lt;td&gt;Bee&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Tom&lt;/td&gt;
      &lt;td&gt;Soon&lt;/td&gt;
      &lt;td&gt;Tree&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;tfoot&gt;
    &lt;tr&gt;
      &lt;td&gt;Total&lt;/td&gt;
      &lt;td colspan=&quot;2&quot;&gt;$1 million&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tfoot&gt;
&lt;/table&gt;

<!-- end snippet -->

答案1

得分: 0

以下是您要翻译的内容:

"So it turns out globalStyle works to achieve this:

export const topLeftRounded = style({});

globalStyle(`${topLeftRounded}:first-child td:first-child`, {
  borderRadius: &quot;1rem 0 0 0&quot;,
});
&lt;tr className={`${topLeftRounded}`}&gt;
  &lt;td&gt;
    This would be
  &lt;/td&gt;
&lt;/tr&gt;
&lt;tr className={`${topLeftRounded}`}&gt;
  &lt;td&gt;
    rendered in a loop
  &lt;/td&gt;
&lt;/tr&gt;
&lt;tr className={`${topLeftRounded}`}&gt;
  &lt;td&gt;
    but only the first td would apply the style
  &lt;/td&gt;
&lt;/tr&gt;

All four corners

Would look something like this

const topLeftRounded = style({});
const topRightRounded = style({});
const bottomLeftRounded = style({});
const bottomRightRounded = style({});

globalStyle(`${topLeftRounded}:first-child td:first-child`, {
  borderRadius: &quot;0.5rem 0 0 0&quot;,
});

globalStyle(`${topRightRounded}:first-child td:last-child`, {
  borderRadius: &quot;0 0.5rem 0 0&quot;,
});

globalStyle(`${bottomLeftRounded}:last-child td:first-child`, {
  borderRadius: &quot;0 0 0 0.5rem&quot;,
});

globalStyle(`${bottomRightRounded}:last-child td:last-child`, {
  borderRadius: &quot;0 0 0.5rem 0&quot;,
});

export const rounded = `${topLeftRounded} ${topRightRounded} ${bottomLeftRounded} ${bottomRightRounded}`;
英文:

So it turns out globalStyle works to achieve this:

export const topLeftRounded = style({});

globalStyle(`${topLeftRounded}:first-child td:first-child`, {
  borderRadius: &quot;1rem 0 0 0&quot;,
});
&lt;tr className={`${topLeftRounded}`}&gt;
  &lt;td&gt;
    This would be
  &lt;/td&gt;
&lt;/tr&gt;
&lt;tr className={`${topLeftRounded}`}&gt;
  &lt;td&gt;
    rendered in a loop
  &lt;/td&gt;
&lt;/tr&gt;
&lt;tr className={`${topLeftRounded}`}&gt;
  &lt;td&gt;
    but only the first td would apply the style
  &lt;/td&gt;
&lt;/tr&gt;

All four corners

Would look something like this

const topLeftRounded = style({});
const topRightRounded = style({});
const bottomLeftRounded = style({});
const bottomRightRounded = style({});

globalStyle(`${topLeftRounded}:first-child td:first-child`, {
  borderRadius: &quot;0.5rem 0 0 0&quot;,
});

globalStyle(`${topRightRounded}:first-child td:last-child`, {
  borderRadius: &quot;0 0.5rem 0 0&quot;,
});

globalStyle(`${bottomLeftRounded}:last-child td:first-child`, {
  borderRadius: &quot;0 0 0 0.5rem&quot;,
});

globalStyle(`${bottomRightRounded}:last-child td:last-child`, {
  borderRadius: &quot;0 0 0.5rem 0&quot;,
});

export const rounded = `${topLeftRounded} ${topRightRounded} ${bottomLeftRounded} ${bottomRightRounded}`;

huangapple
  • 本文由 发表于 2023年6月25日 17:15:42
  • 转载请务必保留本文链接:https://go.coder-hub.com/76549711.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定