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

【问题标题】：Mapping mapping level to background color in Emotion将映射级别映射到 Emotion 中的背景颜色
【发布时间】：2019-02-26 16:04:51
【问题描述】：

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

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

【问题讨论】：

标签： emotion

【解决方案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;

【讨论】：