Сопоставление уровня отображения с цветом фона в Emotion

Question

У меня есть серия строк журнала с соответствующими уровнями в наборе {verbose,debug,info,warning,error,fatal}

Я бы хотел сопоставить каждый уровень (на основе данных строки, которую я рендеринг), с цветом,Какой хороший способ выразить это в эмоциях?

Answer 1

Вы можете использовать для этого тем .Установите пакет тем:

yarn add emotion-theming

Вот пример с React.

App.js:

import React from 'react'
import ReactDOM from 'react-dom'
import { ThemeProvider } from 'emotion-theming'

import LogEntry from './LogEntry .js'

const theme = {
  color: {
    severity: {
      verbose: 'pink',
      debug: 'blue',
      info: 'teal',
      warning: 'orange',
      error: 'red',
      fatal: 'darkred',
    }
  }
}

class App extends React.Component {
  render() {
    return (
      <ThemeProvider theme={theme}>
        <LogEntry severity="info">Info :)</LogEntry>
        <LogEntry severity="warning">Warning!</LogEntry>
      </ThemeProvider>
    )
  }
}

LogEntry.js:

/** @jsx jsx */
import { jsx } from '@emotion/core'
import styled from '@emotion/styled'

const LogEntry = styled.div`
  color: ${props => props.theme.color.severity[props.severity]};
`

export default LogEntry;