nextjs ―― jsx style 学习记录

作用域

全局

<style global jsx>{`   .hero {     width: 100%;     color: #333;   }   .title {     margin: 0;     width: 100%;     padding-top: 80px;     line-height: 1.15;     font-size: 48px;   } `}</style> 

host scope

<div className="root">     <style jsx>{`       .root {         color: green;       }     `}</style>   </div> 

one-off global（只针对某个 css 全局）

import Select from 'react-select' export default () => (   <div>     <Select optionClassName="react-select" />      <style jsx>{`       /* "div" will be prefixed, but ".react-select" won't */        div :global(.react-select) {         color: red       }     `}</style>   </div> ) 

动态 style

① 行内 sytle

const Button = ({ padding, children }) => (   <button style={{ padding }}>      { children }      <style jsx>{`         button {           padding: 20px;           background: #eee;           color: #999         }      `}</style>   </button> ) 

② className 切换

const Button = (props) => (   <button className={ 'large' in props && 'large' }>      { props.children }      <style jsx>{`         button {           padding: 20px;           background: #eee;           color: #999         }         .large {           padding: 50px         }      `}</style>   </button> ) 

③ jsx style 变量

const Button = (props) => (   <button>      { props.children }      <style jsx>{`         button {           padding: ${ 'large' in props ? '50' : '20' }px;           background: ${props.theme.background};           color: #999;           display: inline-block;           font-size: 1em;         }      `}</style>   </button> ) 

或（直接通过 js 引入常量）

import { colors, spacing } from '../theme' import { invertColor } from '../theme/utils'  const Button = ({ children }) => (   <button>      { children }      <style jsx>{`         button {           padding: ${ spacing.medium };           background: ${ colors.primary };           color: ${ invertColor(colors.primary) };         }      `}</style>   </button> ) 

233