不能在 styled-components 中使用全局样式

Question

我正在尝试在 react-native 中设置全局样式。我已经导入

import {injectGlobal} from 'styled-components';

并且有

class XoxoContainer extends Component {
  render() {
    return <Xoxo {...this.props} />
  }
}


injectGlobal`
  font-family: '20'
`;

但我一直在控制台中收到 styledComponents.injectGlobals is not a function.。

Answer 1

那个函数不是react-native库的一部分according to this Github issue.这就是为什么它一直说它不是一个函数，因为它找不到它。

Answer 2

使用此模式创建一个 js 文件：

'use strict';

var React = require('react-native');

var myStyle = React.StyleSheet.create({
   style1: { },
   style2: { }
)}

module.exports = myStyle;

你的组件 js 使用需要使用那个样式 sheet

var customStyle = require('../the/path/to/commonStyleSheet');

现在这样使用：

<View style = {customStyle .style1} />

Answer 3

像这样创建一个 styles.js 文件：

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet
} from 'react-native';

export const styles = StyleSheet.create({
    view_flex_one_white: {
    flex: 1,
    backgroundColor: white
}});

并通过导入在您的应用中的任何地方使用它

    import {styles} from "...link to file/styles";

      render(){
         return(
           <View style={styles.view_flex_one_white}>

           </View>
    )
}

不能在 styled-components 中使用全局样式

Can not use global styles in styled-components

react-native

styled-components