ReactJS/JSX中表格的内联样式

Question

您好，我遇到了在React中添加内联样式到表格组件的问题。基本上我想要做的是让表头/单元格等间距分布，所以我添加了 width: '50%' 样式来实现这个目标。我在控制台中添加它，它可以工作，但是当我返回代码中添加时，它就不起作用了。

我尝试将其添加到任何东西中，只是为了看看是否起作用，但它没有起作用。我是否漏掉了什么重要的东西？

它的外观：

我可以帮您翻译。这是一段关于编程的内容，需要翻译成中文并保留HTML标签。以下是翻译结果：

我希望它看起来像这样（在控制台添加宽度样式后）：{{link1：}}

JSX：

                    <table className="table table-striped">
                        <thead>
                            <tr styles={{width: '50%'}}>
                                <th styles={{width: '50%'}}>Hello</th>
                                <th styles={{width: '50%'}}>World</th>                                
                            </tr>
                        </thead>
                        <tbody>
                            {(data.length == 0)&&           
                                <tr>
                                    <td>I'm</td>
                                    <td>Sam</td>
                                </tr>
                            }
                        </tbody>
                    </table>

- Sam

---

将“styles”改为“style”。 - undefined

Answer 1

您可以在表格上使用table-layout: fixed; width: 100%来强制设置相等的列宽。

table {
  width: 100%;
  table-layout: fixed;
}
table tr th {
  text-align: left;
  background: gray;
  color: white;
}

                    <table className="table table-striped">
                        <thead>
                            <tr style={{width: '50%'}}>
                                <th style={{width: '50%'}}>Hello</th>
                                <th style={{width: '50%'}}>World</th>                                
                            </tr>
                        </thead>
                        <tbody        
                                <tr>
                                    <td>I'm</td>
                                    <td>Sam</td>
                                </tr>
                        </tbody>
                    </table>

你的width: 50%可能无法正常工作，因为其父元素.table没有设置宽度。你可以尝试在表格中添加width: 100%，这样你的50%可能会生效。

编辑 如其他用户所提到的，也需要将styles更改为style。

- Chase DeAnda

Answer 2

如评论中所提到的

将 "styles" 更改为 "style" - cidicles

通常，当将变量传递给另一个组件时，人们使用复数形式的 "styles" 惯例，而单数形式的 "style" 是 jsx-html 标记将接收的关键字，以内联 css。

其他答案建议在 css 中直接向 html 标记添加样式。虽然直接在 html 标记上添加样式而不使用类可能有效，但值得注意的是，它可能无法很好地扩展。这将需要我们更多的工作来回来维护/更新原始代码。

- Urasquirrel