将映射级别映射到 Emotion 中的背景颜色

Question

我有一系列日志行，集合中有相应的级别{verbose,debug,info,warning,error,fatal}

我想将每个级别（基于我正在渲染的线条的数据）映射到一种颜色。表达情感的好方法是什么？

Answer 1

您可以使用 themes。安装主题包：

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;

将映射级别映射到 Emotion 中的背景颜色

Mapping mapping level to background color in Emotion

emotion