Большинство из нас сбивает с толку синтаксис styled-components, когда мы впервые пытаемся его изучить. Когда я впервые взглянул на него, у меня возникло много вопросов: как именно он работает? Использует ли он какой-то новый объект JavaScript, о котором я не знаю? Например, давайте сделаем кнопку с красным текстом.
const Button = styled.button`
color : red;
`
Что именно здесь означает "styled.button"? Это новый объект JavaScript? Оказывается, "styled.button" - не что иное, как функция. Я был полностью сбит с толку, когда узнал, что это функция. Как это работало? Именно тогда я узнал о тегированных шаблонных литералах
Стилизованные компоненты использовали тегированные литералы шаблона. В JavaScript, когда мы передаем шаблонный литерал в качестве аргумента функции, мы можем опустить круглые скобки. Эта функция известна как тегированные литералы шаблона.
Например:
function print(string){
console.log(string.toString())
}
//normal function call
print("Hello World")
// logs "Hello World"
// function call with tagged templates
print`Hello World`
// logs "Hello World"
Оба вызова функций одинаковы, но синтаксис отличается. Второй - это то, что мы называем тегированными шаблонными литералами.
Заключение
Так работают стилизованные компоненты, и это довольно легко понять, если мы разберёмся с тегами шаблонов. Я не углублялся в шаблоны с тегами, поскольку это обширная тема, но этого понимания должно быть достаточно для работы со стилями-компонентами.
Больше контента на plainenglish.io
