import styled from 'styled-components' export const Grid = styled.div` display: grid; grid-template-columns: ${({ columns }) => columns.join(" ")}; grid-template-rows: ${({ rows }) => rows.join(" ")}; grid-template-areas: ${({ areas }) => areas.map(r => `'${r.join(" ")}'`).join(" ")}; width: 100%; height: 100%; ` export const GridArea = styled.div` grid-area: ${p => p.name}; width: 100%; height: 1
I want to set the <html lang="..."> tag on a NextJs application with object notation. Im rendering a serverStylesheet for Styled-components so my current _document file looks like this: class CustomDocument extends Document { static getInitialProps = async (ctx) => { const sheet = new ServerStyleSheet(); const originalRenderPage = ctx.renderPage; try { ctx.renderPage = () => originalRenderPage({ e
はじめに 自分は普段フロントエンドエンジニアとして、React Reduxなアーキテクチャのアプリを作ることが多いのですが、stylingにstyled-componentsを導入しています。今回は、styled-componentsでのCSS設計について書いてみたいと思います。 styled-componentsとは JSでstyleを記述するCSS in JSのライブラリで、2019年8月現在最も人気のあるライブラリです。タグ付きテンプレートリテラルをうまく使った独自性と、明快なAPIでCSS in JSの火付け役にもなり、同じ思想を持った亜種ライブラリ(paypal/glamorous, zeit/styled-jsx等)が続々と出て来るなどある種のブームを巻き起こしました。 そもそも、Reactの登場でフロントエンド開発が「jQueryによるhtmlへの振る舞いの後付け」というスク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く