react-emotion 和外在的组合 css (eg. bootstrap) 类

Question

有没有办法添加外部（例如 bootstrap）类以及 react-emotion 样式？

import React, { Component } from 'react';
import { css } from 'react-emotion';

const MyStyle = css`
  STYLE
`
export default class MyComponent extends Component {
  render() {
    return (<button className={css`${MyStyle}` /* add in some way `btn btn-default` */ }>Text</button>);
  }
}

谢谢！

Answer 1

是的，你可以。下面是 link 我做了一个小例子，字体颜色来自 react-emotion，背景颜色来自 bootstrap.

import React, { Component } from 'react';
import { render } from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';

import styled, { css } from 'react-emotion'

const myStyle = css`
  color: rebeccapurple;
  `;

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <div className={myStyle + ' bg-primary'}>Hello World</div>
    );
  }
}

render(<App />, document.getElementById('root'));

react-emotion 和外在的组合 css (eg. bootstrap) 类

Composition of react-emotion and external css (eg. bootstrap) classes

emotion

reactjs