JSS массив селекторов с одинаковым значением - PullRequest
Новая
       15

JSS массив селекторов с одинаковым значением

0 голосов
/ 12 января 2019

Я создал глобальную таблицу стилей для своего проекта React, который использует JSS. Мне очень удобно работать с модулями CSS, SASS и CSS, но я впервые использую JSS.

Заголовки будут иметь одинаковое поле. Я не хочу набирать его несколькими типами или иметь его в скомпилированных стилях более одного раза для удобства обслуживания и производительности. Я также предпочел бы не добавлять класс ко всем заголовкам.

Мой JSS, который не работает из-за массива селекторов ([h1, h3, h4, h5, h6]): 

const globalStyles = theme => ({
    '@global': {
        body: {
            fontFamily: ['Roboto', 'sans-serif'].join(','),
        },
        [h1, h3, h4, h5, h6]: {
            margin: '0 0 .35em 0'
        },
        h1: {
            fontSize: theme.typography.pxToRem(40),
            fontWeight: 600
        },
        h3: {
            fontSize: theme.typography.pxToRem(34),
            lineHeight: 1.75
        },
        h5: {
            fontSize: theme.typography.pxToRem(28),
            lineHeight: 'normal'
        },
        h6: {
            fontSize: theme.typography.pxToRem(20),
            lineHeight: 'normal'
        }
    }
})

export default globalStyles

Я пытаюсь получить следующий вывод: 

body {
    font-family: Roboto, sans-serif
}
h1, h3, h4, h5, h6 {
    margin: 0 0 .35em 0
}
h1 {
    font-size: 2.5rem;
    font-weight: 600;
}
h3 {
    font-size: 2.125rem;
    line-height: 1.75;
}
h5 {
    font-size: 1.75rem;
    line-height: normal;
}
h6 {
    font-size: 1.25rem;
    line-height: normal;
}

Возможно ли это с JSS? Я немного читал о JSS и не нашел решения.

Ответы [ 2 ]

0 голосов
/ 12 января 2019

[h1, h3, h4, h5, h6] - это неправильный синтаксис javascript, не специфичный для JSS. Вам разрешено иметь только одну переменную в свойстве. поэтому вы можете написать [h], где h - это переменная, которую вы должны определить заранее или напрямую как строковый литерал ['h1'], что не имеет особого смысла, поскольку вы можете использовать ее непосредственно как свойство. Если вы хотите, вы можете выразить это также так, если вам действительно нужны переменные. Это работает, потому что внутренний массив будет приведен к строке, которая по умолчанию преобразуется в значения, разделенные запятыми в js: [1,2].toString() 

  const h1 = 'h1'
  const h2 = 'h2'

  '@global': {
    [[h1, h2]]: {
      color: 'red'    
    }
  }
0 голосов
/ 12 января 2019

Просто поместите их в строку, разделенную запятыми, как в обычном старомодном CSS: 

'@global': {
  'h1, h3, h4, h5, h6': {
     margin: "0 0 .35em 0"
  }
}

Возможно использовать, например. […].join(', ') для построения строки, конечно (как вы сделали с font-family выше).

...