CODEWITHSUNDEEP
javascriptvue-native
Vlad
Vlad

Reputation: 910

Global Styling for Vue Native

So I have a basic Vue Native application with a few screens managed by the StackNavigator.

My App.vue file looks like this:

<template>
    <app-navigator></app-navigator>
</template>

<script>
import {
  createAppContainer,
  createStackNavigator,
} from "vue-native-router";

import Login from './screens/Login.vue';
import Register from './screens/Register.vue';
import HomeScreen from "./screens/HomeScreen.vue";
import DetailsScreen from "./screens/DetailsScreen.vue";
import UserDetails from "./screens/UserDetails.vue";
import CarHistory from "./screens/CarHistory.vue";

const StackNavigator = createStackNavigator(
  {
    Home:         HomeScreen,
    Details:      DetailsScreen,
    Login:        Login,
    Register:     Register,
    UserDetails:  UserDetails,
    CarHistory:   CarHistory,
  },
  {
    initialRouteName: 'Login',
    // initialRouteName: 'CarHistory',
    defaultNavigationOptions: {
      headerStyle: {
        display: 'none',
      },
    },
  },
);

const AppNavigator = createAppContainer(StackNavigator);

export default {
  components: { AppNavigator },
  data: function() {
      return {

      }
  },
}
</script>

<style>

</style>

What I am trying to achieve is somehow create a file or even write the Styling in the Style attribute of the App.vue file but make it apply globally - on every template/screen of the application.

Is that even possible or...?

EDIT: I have tried typing the style in the attribute of the App.vue file, but it does not apply anywhere else but in App.vue.

Upvotes: 3

Views: 448

Answers (1)

Igor Tuyakpaev
Igor Tuyakpaev

Reputation: 11

The only way i know is to write styles in script part of vue component, not in a style tag, and applying it like:

<view :style='styleobj.styleClass'></view>

So you could create javascript files with variables and import it manually to each component, or globally to Vue.prototype.

Upvotes: 1

Related Questions