nextjs —— jsx style 学习记录

怼烎@ 2023-10-10 10:06 50阅读 0赞

**作用域**

全局

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 变量

或（直接通过 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

转载于:https://www.cnblogs.com/lemos/p/11221472.html