Material Ui React Theme customization is not applying - javascript

I'm using Nextjs with Material UI React I want to change default primary color to other color. I have used below code in app.js
import Layout from '../components/layout'
import '../styles/global.css'
import { createTheme , ThemeProvider } from "#material-ui/core/styles";
const theme = createTheme({
palette: {
primary: {
main: '#00ab55',
},
secondary: {
main: "#00ab55"
}
}
});
export default function MyApp({ Component, pageProps }) {
return (
<ThemeProvider theme={theme}>
<Layout>
<Component {...pageProps} />
</Layout>
</ThemeProvider >
)
}
and used it in another component like below in color props.
<TextField className="num_input_field" color='primary' placeholder="phone number" inputProps={{ inputMode: 'numeric', pattern: '[0-9]*' }} />
<Button variant="contained" color="primary">Go</Button>
But no any changes. I have done below multiple things to check
I have changed ThemeProvider to MuiThemeProvider
Also tried <ThemeProvider theme={theme}> to <ThemeProvider MuiTheme={theme}>
Also used createMuiTheme instead of createTheme. but here createMuiTheme is deprecated showing in visual studio code.
Also changed from "#material-ui/core/styles" to from "#material-ui/core"
Below is my package.json to see version.
{
"name": "xyz",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#emotion/react": "^11.4.1",
"#emotion/styled": "^11.3.0",
"#material-ui/core": "^4.12.3",
"#mui/icons-material": "^5.0.1",
"#mui/material": "^5.0.2",
"next": "11.1.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-flags-select": "^2.1.2",
"sass": "^1.42.1"
},
"devDependencies": {
"eslint": "7.32.0",
"eslint-config-next": "11.1.2"
}
}
Please help. Thank you.

Related

Material UI + Next JS 13 - Styles issues in Prod

My Application with MUI in DEV has one custom design
My Application with MUI in Prod has no custom design
Should I make something different?
Is missing some extra configuration?
Sample of something that is not working:
<Typography className={styles.customStyle} component="h1">
{t("Translation")}
</Typography>
The className={styles.customStyle} is totally ignored in Prod
This works fine in DEV.
My configuration
node v19.0.0
Package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#mui/icons-material": "^5.11.0",
"#mui/material": "^5.11.0",
"#mui/styles": "^5.11.1",
"#next/font": "13.0.7",
"#types/node": "^18.13.0",
"#types/react": "18.0.26",
"#types/react-dom": "18.0.9",
"axios": "^1.2.1",
"country-flag-icons": "^1.5.5",
"eslint": "8.29.0",
"eslint-config-next": "^13.1.1",
"html-entities": "^2.3.3",
"i18next": "^22.4.6",
"json5": "^1.0.2",
"next": "^13.1.1",
"next-translate": "^1.6.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-i18next": "^12.1.1",
"sass": "^1.57.0",
"typescript": "4.9.4"
}
}
next.config.js
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
experimental: {
appDir: true,
},
}
module.exports = nextConfig
FIXED:
After reading this article: https://blog.logrocket.com/getting-started-with-mui-and-next-js/
I saw that it was missing added <CacheProvider />.
So after that, the style custom works fine.
SOLUTION:
First, create a new file in the utils directory called createEmotionCache.js.
import createCache from "#emotion/cache";
export default function createEmotionCache() {
return createCache({ key: "css", prepend: true });
}
After go to the _app.js or page.js (if using LAYOUT RFC)
....
import { CacheProvider } from "#emotion/react";
const clientSideEmotionCache = createEmotionCache();
function MyApp({
Component,
emotionCache = clientSideEmotionCache,
pageProps,
}) {
return (
<CacheProvider value={emotionCache}>
<App />
</CacheProvider>
);
}
export default MyApp;
Thanks it.

NativeWind not working when used with React Navigation

NativeWind it's not working.
It was working when the content of the file tailwind.config.js was './App,{js,jsx,ts,tsx}' but not anymore since I implemented the React Navigation.
tailwind.config.js:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./App.{js,jsx,ts,tsx}", "./screens/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
}
package.json:
{
"name": "inovarlagos",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"#react-navigation/native": "^6.0.12",
"#react-navigation/native-stack": "^6.8.0",
"expo": "~46.0.9",
"expo-status-bar": "~1.4.0",
"nativewind": "^2.0.7",
"react": "18.0.0",
"react-native": "0.69.5",
"react-native-safe-area-context": "4.3.1",
"react-native-screens": "~3.15.0"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"tailwindcss": "^3.1.8"
},
"private": true
}
App.js:
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import HomeScreen from './screens/HomeScreen';
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
./screens/HomeScreen.js:
import { View, Text } from 'react-native';
import React from 'react';
const HomeScreen = () => {
return (
<View className="flex-1 items-center justify-center bg-black">
<Text className="text-red-200">Futuristik Lagos- Home</Text>
</View>
);
};
export default HomeScreen;
Project structure:
Result (TailWind not working):
I assume you're using NativeWind, since support for TailwindCSS ended for React Native recently.
First stop the expo server. Then, instead of starting it with expo start, run expo start -c to wipe the cache that NativeWind adds and restart the server.
Source: https://www.nativewind.dev/guides/troubleshooting
To fix this issue, simply clear your project's cache either by expo start -c or react-native start --reset-cache.

Error when trying to use Material Top Tabs

I'm using react native for a project and I'm trying to use a component that react navigation offers, it's the top tabs, everytime I use this though a error comes up, mostly one that says
Invariant Violation: Tried to register two views with the same name RNCViewPager
I've looked up what could cause this and some people said that it was because of the react-native-pager-view package itself so I tried to switch it out but I still have no resolved it.
This is the tab component:
import { StyleSheet, Image, Text, View, TextInput, Pressable, Button,
FlatList, ImageBackground } from "react-native";
import { Home } from "../Tabs/Explore";
import { createMaterialTopTabNavigator } from "#react-
navigation/material-top-tabs";
import { Search } from "../Secondary/Search";
import { Tags } from "../Secondary/Tags";
const Tab = createMaterialTopTabNavigator();
export function TopTabs() {
return (
<Tab.Navigator initialRouteName="HomeExplore">
<Tab.Screen name="HomeExplore" component={Home} />
<Tab.Screen name="Search" component={Search} />
<Tab.Screen name="Tags" component={Tags} />
</Tab.Navigator>
)
}
const stylesl = StyleSheet.create({
tab: {
backgroundColor: "#000000"
}
})
Now this is where I wanted the tab component to go, but I get a error everytime.
import React, { useState, useEffect } from 'react';
import { createStackNavigator } from '#react-navigation/stack';
import User from '../../Post/User';
import { StyleSheet, Image, Text, View, TextInput, Pressable, Button,
FlatList, ImageBackground, ScrollView } from "react-native";
import Community from '../../Post/Community';
import { QUOTE, POST, COMMUNITY, PAGE, VIDEO, CUSTOMER, PRODUCT, Search }
from '../../graphql/Mutation';
import { TopTabs } from './Foreal';
const Stack = createStackNavigator()
export default function Explores({ navigation }) {
return (
<Stack.Navigator initialRouteName="Base" screenOptions={{ headerStyle: { height: 55, backgroundColor: 'black', shadowColor: 'transparent' }, tabBarStyle: { backgroundColor: "black", borderTopWidth: 4 } }}>
<Stack.Screen name="Base" component={TopTabs} options={{
}} />
<Stack.Screen name="singleUser" component={UserList} options={{ headerShown: false }} />
<Stack.Screen name="MoreSearch" component={Searching} options={{ headerShown: false }} />
</Stack.Navigator>
)
}
And here's my package.json:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#apollo/client": "3.4.16",
"#gorhom/bottom-sheet": "^4.1.1",
"#react-native-async-storage/async-storage": "~1.15.0",
"#react-navigation/bottom-tabs": "^6.0.5",
"#react-navigation/material-top-tabs": "^6.0.6",
"#react-navigation/native": "^6.0.6",
"#react-navigation/stack": "^6.0.7",
"#stripe/stripe-react-native": "0.2.3",
"#types/react-native-scrollable-tab-view": "^0.10.2",
"apollo-link-context": "^1.0.20",
"date-fns": "^2.25.0",
"expo": "^44.0.0",
"expo-app-loading": "~1.3.0",
"expo-av": "~10.2.0",
"expo-file-system": "~13.1.2",
"expo-image-picker": "~12.0.1",
"expo-status-bar": "~1.2.0",
"formik": "^2.2.9",
"graphql": "^16.2.0",
"graphql-tag": "^2.12.5",
"ionicons": "^5.5.3",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-bottomsheet": "^2.5.2",
"react-native-elements": "^3.4.2",
"react-native-gesture-bottom-sheet": "^1.0.9",
"react-native-gesture-handler": "~2.1.0",
"react-native-pager-view": "^5.4.9",
"react-native-reanimated": "~2.3.1",
"react-native-safe-area-context": "3.3.2",
"react-native-scrollable-tab-view": "^1.0.0",
"react-native-stripe-sdk": "^0.0.0",
"react-native-tab-view": "^3.1.1",
"react-native-web": "0.17.1",
"yup": "^0.32.11"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}

TypeError: [setState with createContext] is not a function - React

I am using React's Context API to call setCurrentUser below. But it gives me this error:
TypeError: setCurrentUser is not a function.
Upon logging console.log(useContext(globalContext)), I get the empty object {}.
I have manually converted my project from TS(where it worked by specifying setCurrentUser as type Dispatch) to JS, so I am not sure if that broke something...at least my react and react-dom packages should be current.
How do we make this work with JS? Thanks
Router.jsx - where I am calling setCurrentUser
import React, { useContext, useEffect } from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import LoginPg from "../pages/LoginPg/LoginPg";
import ErrorHandler from "./ErrorHandler";
import ErrorPg from "../pages/ErrorPg/ErrorPg";
import useGet from "../../server_api/useGet";
import ProtectedRoute from "./ProtectedRoute";
import HomePg from "../pages/HomePg/HomePg";
import { globalContext } from "../../store/context/globalContext";
import CalendarPg from "../pages/Calendar/CalendarPg";
function Router() {
const { currentUser, setCurrentUser } = useContext(globalContext);
const [doGet] = useGet();
let user;
console.log(useContext(globalContext)); // <==== logs: {}
useEffect(() => {
doGet("auth/authenticate", (res) => {
if (res) {
user = res.username;
setCurrentUser(res);
} else {
console.log("Router: user not authenticated");
}
});
}, []);
return (
<BrowserRouter>
<ErrorHandler>
<Switch>
<Route path="/error" component={ErrorPg} />
<Route path="/login" component={LoginPg} />
<ProtectedRoute
path="/calendar"
Component={CalendarPg}
isAuth={currentUser}
key="uniquevalue"
/>
<ProtectedRoute path="/" Component={HomePg} isAuth={currentUser} />
</Switch>
</ErrorHandler>
</BrowserRouter>
);
}
export default Router;
globalContext.jsx
import { createContext, useState } from "react";
export const globalContext = createContext({});
export default function GlobalContext(props) {
const [currentUser, setCurrentUser] = useState(null);
return (
<globalContext.Provider value={{ currentUser, setCurrentUser }}>
{props.children}
</globalContext.Provider>
);
}
package.json
{
"name": "test",
"version": "0.1.0",
"private": true,
"homepage": "/",
"dependencies": {
"#fullcalendar/daygrid": "^5.9.0",
"#fullcalendar/interaction": "^5.9.0",
"#fullcalendar/react": "^5.9.0",
"#fullcalendar/timegrid": "^5.9.0",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"antd": "^4.16.13",
"axios": "^0.21.1",
"bootstrap": "^5.1.1",
"font-awesome": "^4.7.0",
"fullcalendar": "^5.9.0",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"query-string": "^4.3.4",
"react": "^17.0.2",
"react-calendar": "^3.4.0",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-modal": "^3.14.3",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"sass": "^1.39.2",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"cypress": "npx cypress open"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"cypress": "^7.5.0"
}
}
You need the consumer (Router) to be a child of the provider (GlobalContext).
Also your component names should start with an Upper case.
import { GlobalContext } from "../../store/context/GlobalContext";
const App = () => {
const [currentUser, setCurrentUser] = useState(DEFAULT_USER);
return (
<GlobalContext.Provider value={{ currentUser, setCurrentUser }}>
<Router />
</GlobalContext.Provider>
);
};

How to use material-ui theme along with redux in gatsby

I am using material-ui theme along with redux-toolit in gatsby.
My theme.ts file:
import { createMuiTheme } from "#material-ui/core";
import { useSelector } from "react-redux";
import { State } from "./Types/SliceTypes";
export const Theme = () => {
const islit = useSelector((state: State) => state.themes.value);
const theme = createMuiTheme({
palette: {
type: islit ? "light" : "dark",
},
});
return theme;
}
Now When I import this Theme in gatsby-browser and gatsby-ssr file it give an error. Invalid hook call. Hooks can only be called inside of the body of a function component
Even if I don't use islit and use theme only that is inside the Theme function the code still doesn't work.
My gatsby-browser.js and gatsby-ssr.js file:
import React from 'react';
import { Provider } from 'react-redux';
import store from './src/Global/store';
import { ThemeProvider } from "#material-ui/core/styles";
import { Theme } from "./src/Global/theme";
export const wrapRootElement = ({ element }) => {
return <Provider store={store}><ThemeProvider theme={Theme()}>{element}</ThemeProvider></Provider>;
};
My gatsby-config.js file:
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-material-ui`,
`gatsby-plugin-image`,
My package.json file:
{
"name": "gatsby-starter-default",
"private": true,
"description": "A simple starter to get up and developing quickly with Gatsby",
"version": "0.1.0",
"author": "Kyle Mathews <mathews.kyle#gmail.com>",
"dependencies": {
"#contentful/rich-text-react-renderer": "^14.1.3",
"#material-ui/core": "^4.11.3",
"#material-ui/icons": "^4.11.2",
"#reduxjs/toolkit": "^1.5.1",
"#types/react": "^17.0.3",
"#types/react-dom": "^17.0.3",
"#types/react-redux": "^7.1.16",
"#typescript-eslint/eslint-plugin": "^4.22.0",
"#typescript-eslint/parser": "^4.22.0",
"dotenv": "^8.2.0",
"firebase": "^8.4.1",
"firebaseui": "^4.8.0",
"gatsby": "^3.3.0",
"gatsby-plugin-firebase": "^0.2.0-beta.4",
"gatsby-plugin-gatsby-cloud": "^2.2.0",
"gatsby-plugin-image": "^1.2.1",
"gatsby-plugin-manifest": "^3.2.0",
"gatsby-plugin-material-ui": "^3.0.1",
"gatsby-plugin-offline": "^4.2.0",
"gatsby-plugin-react-helmet": "^4.2.0",
"gatsby-plugin-sharp": "^3.2.1",
"gatsby-source-contentful": "^5.3.0",
"gatsby-source-filesystem": "^3.2.0",
"gatsby-transformer-remark": "^4.0.0",
"gatsby-transformer-sharp": "^3.2.0",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-redux": "^7.2.3",
"typescript": "^4.2.4"
},
"devDependencies": {
"#types/react-helmet": "^6.1.1",
"prettier": "2.2.1"
},
"keywords": [
"gatsby"
],
"license": "0BSD",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}
I have a similar set up and was able to solve this by following this setup recommended by MUI; https://github.com/mui-org/material-ui/tree/next/examples/gatsby
In the file gatsby/plugins/gatsby-plugin-top-layout/TopLayout.js you can add your redux Provider;
import { Provider } from "react-redux";
import { ThemeProvider } from "#material-ui/core/styles";
import { Theme } from "../../src/Global/theme";
import store from '../../src/Global/store';
...
<Provider store={store}>
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
{props.children}
</ThemeProvider>
</Provider>
...

Categories