Специфичные для стиля HTML-теги в React

Question

У меня есть стол, и я пытаюсь его оформить. Вот что я сделал до сих пор:

                <tr>
                    <th> </th>
                    <th style={tstyle}>Canada</th>
                    <th style={tstyle}>US</th>
                    <th style={tstyle}>Total</th>
                </tr>

и затем:

const tstyle = {
border: '1px solid #dddddd',
padding: '8px',
};

Это прекрасно работает, но я уверен, что это лучший способ сделать это без повторения style={tstyle}. Я пытался делать как:

const styles = () => createStyles({
th: {
    color: 'blue',
},

Нет ошибок, но это не работает.

Answer 1

Я предлагаю использовать стилизованный компонент.Вы можете определить что-то вроде

const TableHeader = styled.th`    
      border: '1px solid #dddddd',
      padding: '8px',
    `;

и использовать его следующим образом:

<TableHeader></TableHeader>
<TableHeader>Canada</TableHeader>
....

Вот ссылка для начала работы https://www.styled -components.com / docs / basics #получение стартером

Answer 2

Вот еще одно предложение: создайте стиль с помощью классов:

                    <tr>
                    <th> </th>
                    <th className={classes.tableCell} >Canada</th>
                    <th className={classes.tableCell}>US</th>
                    <th className={classes.tableCell}>Total</th>
                    </tr>

, а затем:

tableCell: {
    border: '1px solid #dddddd',
    padding: '8px',
  },

Answer 3

Как насчет пользовательского функционального компонента?

const style = {
border: '1px solid #dddddd',
padding: '8px',
};
const StyledTh = ({children: text}) => <th style={style}>{text}</th>

Использование:

                <tr>
                    <th></th>
                    <StyledTh>Canada</StyledTh>
                    <StyledTh>US</StyledTh>
                    <StyledTh>Total</StyledTh>
                </tr>

Answer 4

Избегайте использования встроенных стилей. Вместо этого добавьте ниже стиль CSS в ваш глобальный файл CSS

Установить идентификатор элемента tr

            <tr id="tr">
                <th> </th>
                <th>Canada</th>
                <th>US</th>
                <th>Total</th>
            </tr>

Например: файл app.css

  #tr > th{
       border: '1px solid #dddddd';
       padding: '8px';
  }

Если что-то переопределяет другие стили, установите значение

  #tr > th{
       border: '1px solid #dddddd !important';
       padding: '8px !important';
  }

Таким образом, этот стиль CSS будет применяться ко всем вашим приложениям, кем бы вы ни использовали эти элементы

Answer 5

Почему бы не перебрать стиль элемента th?

headers = ['Canada', 'US', 'Total'];
const headerElements = headers.map(header => <th style={tstyle}>{header}</th>);

Затем вы вызываете все элементы заголовка

<tr>{headerElements}</tr>

Answer 6

create-реакции-приложение поддерживает CSS-модули в последних сборках, ознакомьтесь с ними;)

https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet

Также хорошим вариантом являются также Styled Components.