Central style sheet for react native? - reactjs

I am learning how develop react native development and I am curious if you could put all the styles into one style.js file and then export it which allow all the components to be able to use the styles.

Yes you can. u can write styles in seperate file.
import React, { Component, PropTypes } from 'react';
import { StyleSheet } from 'react-native';
var styles = StyleSheet.create({
...
});
module.exports = styles;
Then import it in componnet class like
import styles from './styles'

Related

Material-UI styles overriding my styles cause of ordering

Hello there fellow programmers.
I am currently experiencing an issue with my own styles created using makeStyles(...). What's happening is; when I import my styles constant which is exported from another module, the style block is placed before the other MUI styles which causes mine to be overriden. I have not yet been able to find any solution to this what so ever and that is why I am here today, trying to figure out how I could possibly go my ways to fix this. Here's an image that contains the order of the style blocks that is playing with my mind currently.
PLEASE NOTE: The style block that's mine is the one with the data meta of makeStyles. Another thing is, I've attempted to use StylesProvider.
IMPORTANT: This only happens when uploaded. It works just fine on localhost, but this is the outcome of being uploaded to vercel.
Here's two examples of usages:
import { Theme } from '#material-ui/core';
import { makeStyles } from '#material-ui/core/styles';
const DarkTheme = makeStyles((theme: Theme) => ({
mdButton: {
backgroundColor: "#404040"
},
}));
export default DarkTheme;
import {Button} from '#material-ui/core';
import React from "react";
import DarkTheme from 'DarkTheme';
export default function Example() {
const styles = DarkTheme();
return (
<Button className={styles.mdButton}>
Example
</Button>
)
}
Any help is appreciated, thank you in advance.
As you may know, f you have two CSS classes applied to the same element with the same degree of specificity, then the winner will be the CSS class that is defined last within the document (based on the order of the elements in the , NOT the order of the class name strings in the class attribute of the element being styled). As: Material UI v4 makeStyles exported from a single file doesn't retain the styles on refresh
So, you can change order of imports. Import Button before import style.
Let try with what is different from:
import React from "react";
import {Button} from '#material-ui/core';
import DarkTheme from 'DarkTheme';
and
import React from "react";
import DarkTheme from 'DarkTheme';
import {Button} from '#material-ui/core';
makeStyles returns a function which must be called as a React hook. So please name it in consequence.
const useDarkTheme = makeStyles((theme: Theme) => ({
mdButton: {
backgroundColor: "#404040"
},
}));
export default useDarkTheme;
https://reactjs.org/docs/hooks-intro.html
If you don't want to use hooks you can check withStyles alternative: https://material-ui.com/styles/basics/#higher-order-component-api
You can also check how CSS injection works in material-ui https://material-ui.com/styles/advanced/#css-injection-order (tl;dr: order of makeStyles calls matter).

How to import material-ui components?

Heavily using material-ui in my app, is there a way to avoid doing imports in each app component like this?
import Typography from "#material-ui/core/Typography";
import Box from "#material-ui/core/Box";
import Grid from "#material-ui/core/Grid";
import Container from "#material-ui/core/Container";
....
or this:
import {Typography, Box, Grid, Container} from "#material-ui/core";
Is there such thing like this? So that I don't need to import each component?
import * from "#material-ui/core"
Thanks in advance! :D
Yes, there is an import all in JavaScript. You can do it like so:
import * as Mui from '#material-ui/core';
This puts all of the named exports of #material-ui/core into the Mui "namespace". Then, you can easily access any of the components i.e.:
<Mui.Typography>Test</Mui.Typography>
You can read more about import here.
The first option is not much clean from an import statement perspective, especially when you want to import and use a lot of Mui components, but as you use path imports to avoid pulling in unused modules, gets an optimized bundle size automatically.
The second option (import * from "#material-ui/core"), on the other hand, is the most convenient from a development perspective, and also makes you have a clean import statement, but will make your application packages larger than they import each component separately depending on what part of components you are using.
Moreover, there is a large scale application you need to import from different sources of Material-ui:
import {} from '#material-ui/core';
import {} from '#material-ui/icons';
import {} from '#mui/material';
A better optimized approach, is to create a single file in your project where you import each component that you use individually, then export them all under a single namespace:
// src/mui/index.js
export { default as MenuItem } from '#material-ui/core/MenuItem';
export { default as TextField } from '#material-ui/core/TextField';
export { default as Select } from '#material-ui/core/Select';
export { default as ClearIcon} from '#material-ui/icons/Clear';
export { default as FormControl } from '#material-ui/core/FormControl';
export { default as Button } from '#mui/material/Button';
...
Then you can import that file wholesale into each component where you need it:
// ../../MyComponent.js
import {
MenuItem,
TextField,
Select,
ClearIcon,
FormControl
} from 'mui';
Now you have a clean import statement and optimized bundle size as well.
Working with absolute path: I never address components with a relative path (e.i ../../../mui). you can take a look here if you don't know how to use absolute path in React.
Hi you can do this in following way:
create a folder called collections
create a file called index.js under collections folder
write the following code in index.js
export {default as Button} from "#material-ui/core/Button";
export {default as Card} from "#material-ui/core/Card";
export {default as Paper} from "#material-ui/core/Paper";
now import collection like bellow:
import * as collections from './collections';
Your component file will be as:
import React, {Component} from "react";
import * as collections from './collections';
class Box extends Component {
render() {
return (
<div>
<collections.Button>
Test
</collections.Button>
<collections.Card>test</collections.Card>
<collections.Paper>test</collections.Paper>
</div>
);
}
}
export default Box;

React - How to import node_modules styles into component to style it locally

Please help me on this issue. First, I am using both materialize-css and materiaul-ui at the same time. First, I created a Navbar that imports materialize-css node_module style files.
import { useContext } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
import _ from 'lodash';
import ActiveLink from '../ActiveLink';
import PagesContext from '../context/PagesContext';
import './Navbar.scss';
const Navbar = () => {
const pagesContext = useContext(PagesContext);
const router = useRouter();
const currentRouteObject = _.find(pagesContext, function(page) {
return page.path === router.pathname;
});
And,
Navbar.scss
#import '~materialize-css/dist/css/materialize.min.css';
And, I have one other component. But, this materialize-css styles are imported in that other component too. And, it breaks my styling for other component. Is there any way of encapsulating this imported styles as like in Angular?
Thanks in advance for your helps.
Best Regards.
You could do
Navbar.scss
.materialize-container {
#import '~materialize-css/dist/css/materialize.min.css';
}

Material-ui withTheme() giving error "TypeError: Object(...) is not a function"

EDIT: I installed the v1.0.0.36 beta version and copied the sample from that versions docs (which looks identical to me) and it worked straight away. Not sure what the problem was but thanks for replies
I am trying to use Material-UI's withTheme to access the theme in a component.
I have followed the sample in the docs which goes through the create-react-app packager ok but in the browser gives the error: TypeError: Object(...) is not a function
and highlights the code line > 17 | export default withTheme()(WithTheme);
I have cut down the sample code to the most basic use of withTheme() and am still receiving this error
withtheme.js
import React from 'react';
import { withTheme } from 'material-ui/styles';
function WithTheme() {
const styles = {
primaryText: {
color: 'red',
}
};
return (
<h1 style={styles.primaryText}>Hello</h1>
);
}
export default withTheme()(WithTheme);
EDIT: To help clarify the problem, here is the App.js file.
import React, { Component } from 'react';
import './App.css';
import 'typeface-roboto';
import AppBar from 'material-ui/AppBar';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {brown500, brown900} from 'material-ui/styles/colors';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import WithTheme from './components/withtheme';
const Theme = getMuiTheme({
palette: {
primary1Color: brown900,
primary2Color: brown500,
}
});
class App extends Component {
render() {
return (
<MuiThemeProvider muiTheme={Theme} >
<AppBar
title="Title"
iconClassNameRight="muidocs-icon-navigation-expand-more" />
<WithTheme />
</MuiThemeProvider>
);
}
}
export default App;
I have customised the theme and changed primary1Color to brown, using muiThemeProvider. This all works fine when I remove the WithTheme component from App.js - the AppBar is brown as expected. The problem is I am getting the error when I try to use the mui withTheme function.
My intention is to set the h2 in WithTheme component to be whatever color the current theme has for primary1Color
**End Edit
Any help would be appreciated. Happy to post the (almost) exact copy of the doco sample code which achieves the same error if required.
Thanks
As MaterialUI is no longer in Beta, the spec has changed a bit, outdating Liam's answer. Per the Material-UI
v3.1.2 docs
import { withTheme } from '#material-ui/core/styles';
export default withTheme()(WithTheme);
As of Material 4, the spec was changed a bit again: https://material-ui.com/styles/api/#withtheme-component-component (thus outdating Awnage's answer too).
So now it is:
import { withTheme } from '#material-ui/styles';
export default withTheme(MyComponent);
No need to use withStyles() unless if you want to make a specific style for the component
Warp your App with MuiThemeProvider then you are able to use the theme properly
Material-Ui 0.20.0
For access theme colors use getMuiTheme
import getMuiTheme from 'material-ui/styles/getMuiTheme';
export default muiThemeable()(App)
http://www.material-ui.com/#/components/app-bar
Working Demo
Material-Ui 1.0.0 beta
For access theme colors use withTheme
import { withTheme } from 'material-ui/styles';
export default withTheme()(App)
https://material-ui-next.com/demos/app-bar/
Working Demo V1
If you intend to change the theme of material-ui, I would prefer using getMuiTheme. Refer http://www.material-ui.com/#/customization/themes for documentation. What happens here is, you are styling your component with JavaScript and hence the export requires withStyles to be called.
export default withStyles(styles)(WithTheme);

How to import all components in React?

I want to do this
in src/modules/layout/nav.js
...
export default NavBar;
in src/modules/layout/side.js
...
export default sideBar;
in src/modules/layout/index.js
import NavBar from './nav';
import sideBar from './side';
export { NavBar, sideBar };
in src/modules/index.js
import * from './layout';
The last bit does not work. According to the tutorial I would then be able to go to src/App.js and use the navBar as so:
import {navBar} from './modules';
But the fact that * does not work I can't do that. Is there any alternative without having to go like this
in src/modules/index.js
import * as All from './layout';
export All;
Then in App.js, go All.navBar. That feels ugly
Well, I have gone through what you have; I feel what you actually needed is to understand the reason for doing that. I am pretty sure what you want to achieve is to have your components imported from a single file rather than from the files where the components were exported.
You don't want to do this:
import NavBar from 'src/modules/layout/NavBar';
import SideBar from 'src/modules/layout/SideBar';
But what you want is to import all your components from a single file wherever you would want to use them.
So, if that is the case, you don't need to add more complexities. All you just need to do is:
// export the components like this
export default NavBar;
export default SideBar;
// Then, in your src/modules/layout/index.js file, import // the components you exported just the way you did it
import NavBar from './NavBar';
import SideBar from './SideBar';
export {
NavBar,
SideBar
}
// Hence, wherever you need both components, you can easily do this:
import { NavBar, SideBar } from '../index.js'
// From the above, you are just importing both components from the index.js file.
So, I believe that answers your question.
Just to add to Onyekachi Samuel's answer and to answer the all part of the title:
After creating the src/modules/layout/index.js file as he described, you can import all by:
import * as All from './layout'
And use the exported components:
<All.NavBar/> <All.SideBar/>
For instance:
// Folder structure:
// |-App.js
// |-Layout
// |-NavBar.js
// |-SideBar.js
// |-index.js
// App.js in the same location as Layout folder
import React from 'react';
import * as All from './layout'
export default function App(props) {
return (<div>
<All.NavBar/>
<All.SideBar/>
</div>)
}
Hope this might clarify it for some.

Resources