// Обычно вы начинаете с чего-нибудь вроде:
// import glamorous from 'glamorous'

const mediaQueries = {
	phone: '@media only screen and (max-width: 500px)',
}



const Heading = glamorous.h1({

})



const Link = glamorous.a({

})



const ListItem = glamorous.li({

})



const CodeBlock = glamorous.pre({

})



// Попробуйте поменять и другие стили:

const Paragraph = glamorous.p({

})

const Code = glamorous.code({

})

const List = glamorous.ul({

})


render(
	<ReactMarkdown
		renderers={{
			Heading,
			Link,
			Paragraph,
			Code,
			CodeBlock: props => (
				<CodeBlock
					key={props.nodeKey}
					language={props.language}
					className={`language-${props.language} ${props.className}`}
				>
					<Code>
						{props.literal}
					</Code>
				</CodeBlock>
			),
			List,
			Item: ListItem,
		}}
	/>
)
Извините, кажется ширина вашего экрана слишком мала для редактора. Вы можете ознакомиться с текстом и вернуться с большим экраном, если хотите поиграть со стилизацией

Привет 👋

Мы собираемся обучить вас использовать glamorous, редактируя документацию, которую вы читаете 😱

Для старта у нас уже есть несколько компонентов, объявленных слева, так что вам нужно просто задать им стили, чтобы изменить то, как это руководство выглядит и движется

Базовые стили

Начнем с того, что сделаем заголовки на этой странице красивыми. С glamorous, вместо обычного синтаксиса CSS, с которым вы, возможно, знакомы, мы используем обычные JavaScript объекты.

Измените Heading так:

const Heading = glamorous.h1({
  fontSize: '2.4em',
  marginTop: 10,
  color: '#CC3A4B',
})

Медиа Запросы

Сделаем уменьшенные заголовки для узких областей просмотра (как на мобильном устройстве)

Обновите Heading так:

const Heading = glamorous.h1({
  fontSize: '2.4em',
  marginTop: 10,
  color: '#CC3A4B',
  [mediaQueries.phone]: {
    fontSize: '1.8em',
    backgroundColor: '#CC3A4B',
    color: 'white'
  },
})

Теперь измените размер страницы, чтобы увидеть что изменилось

Псевдо Классы

У нас есть ссылка ссылка. Добавим стили ее псевдо классам: active, visited, и hover.

Обновите Link так:

const Link = glamorous.a({
  ':visited': {
    color: 'darkblue',
  },
  ':hover,:active,:focus': {
    color: 'darkred',
  },
})

Вы уже были по этой ссылке? 😈

Псевдо Элементы

  • это
  • наш
  • самый
  • отличный
  • список

Поменяем то, как рендерятся элементы списка с помощью псевдо элементов.

const ListItem = glamorous.li({
  ':before': {
    content: '"💎"',
  }
})

ВНИМАНИЕ! Это легко забыть в CSS, но значение свойства content окружается кавычками. Несмотря на то, что вы технически делаете это, потому что преобразовываете content в строку, эта строка инжектится в файл стилей вместе с кавычками.

Динамические Стили

Вы можете предоставить функцию как аргумент для glamorousComponentFactory (кстати, это то как работает glamorous.h1). Эта функция будет вызвана с props.

Компонент CodeBlock принимает language как prop. Вот что представляет собой код блока html:

<html>
<head>
  <title>Привет мир!</title>
</head>
<body>
  Привет мир!
</body>
</html>

Изменим стили для блока html :

const CodeBlock = glamorous.pre(props => {
  const isHTML = props.language === 'html'
  if (isHTML) {
    return {
      padding: 20,
      backgroundColor: '#0c1e35',
    }
  }
})

Слияние Стилей

glamorous под капотом использует glamor для генерации и вставки CSS, который вы пишете. Одна из самых клевых фич glamor это то, насколько он компонуем. C glamorousComponentFactory функциями, (как и glamorous.pre) вы можете использовать любое количество аргументов и стили будут слиты. Вдобавок, вы можете предоставить массив или возвратить массив динамических стилей и они тоже будут слиты между собой (при конфликте преимущество будет за последним стилем). Давайте попробуем:

Обновите CodeBlock чтобы он выглядел так:

const CodeBlock = glamorous.pre({
  position: 'relative',
  padding: 20,
  ':before': {
    position: 'absolute',
    top: '0',
    opacity: '0.6',
    left: '7px',
    fontSize: '0.8rem',
  },
}, props => {
  const isHTML = props.language === 'html'
  let styles = [
    {
      ':before': {
        content: `"${props.language}"`,
      }
    }
  ]
  if (isHTML) {
    styles.push({
      backgroundColor: '#0c1e35',
    })
  }
  // Возвращаем массив стилей.
  return styles
})

Вот и всё!

Это все, что у нас есть на данный момент. Если вы хотите помочь с руководством, это было бы прекрасно! Пожалуйста, заходите на наш репозиторий на Гитхабе!