Встроенные стили для таблиц в ReactJS / JSX

Question

Привет, у меня проблемы с добавлением встроенного стиля к компонентам таблицы в React.По сути, я пытаюсь сделать так, чтобы заголовок / ячейки таблицы были разделены поровну, поэтому я добавляю стиль width: '50%', чтобы эта работа работала.Я добавил в консоль, и она работает, но когда я возвращаюсь, чтобы добавить ее в свой код, это не так.

Я попытался добавить ее к чему-либо, просто чтобы посмотреть, работает ли она, и нет.Что-то мне не хватает?

Как это выглядит:

ЧтоЯ хочу, чтобы это выглядело (после добавления стиля ширины в консоль):

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>

Answer 1

Как уже упоминалось в комментариях

Измените 'styles' на 'style' - cidicles

Обычно множественные стили - это соглашение, которое люди используют при передаче переменной в другуюкомпонент, в то время как стиль единственного числа - это ключевое слово, которое теги jsx-html получат для вставки CSS.

Другие ответы рекомендуют добавлять стили в теги html непосредственно в CSS.Хотя добавление стилей в HTML-теги напрямую без использования классов может работать, стоит отметить, что оно может плохо масштабироваться. Это потребует от нас дополнительной работы, чтобы вернуться и поддерживать / обновлять исходный код.

Answer 2

Вы можете использовать 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 styles={{width: '50%'}}>
                                <th styles={{width: '50%'}}>Hello</th>
                                <th styles={{width: '50%'}}>World</th>                                
                            </tr>
                        </thead>
                        <tbody        
                                <tr>
                                    <td>I'm</td>
                                    <td>Sam</td>
                                </tr>
                        </tbody>
                    </table>

Ваш width: 50%, скорее всего, не работает, поскольку у вашего родителя .table не установлена ​​ширина.Вы можете попробовать добавить width: 100% к таблице, и тогда ваш 50% может работать.