So I try the following code to convert a functional component to the classical component, it kinda worked, no error but styles are not applied.
import { makeStyles } from '#material-ui/core/styles';
import { withStyles } from '#material-ui/core/styles';
const playtheMusic = () => {
pauseMusic();
};
const pausetheMusic = () => {
pauseMusic();
};
const useStyles = makeStyles(theme => ({
text: {
padding: 50
},
paper: {
paddingBottom: 50
},
list: {
marginBottom: theme.spacing(2)
},
subheader: {
backgroundColor: theme.palette.background.paper
},
appBar: {
top: 'auto',
bottom: 0,
backgroundColor: '#282828',
padding: '15px'
},
grow: {
flexGrow: 1
}
}));
class BottomAppBar extends React.Component {
// const classes = useStyles();
render() {
const { classes } = this.props;
return (
<div>
<AppBar position="fixed" className={classes.appBar}>
<div style={{ display: 'flex', alignItems: 'center', alignContent: 'center' }}>
<div>
<Typography style={{ fontSize: 15 }}> Stress Out </Typography>
<br />
<Typography style={{ fontSize: 12, color: '#B3B3B3' }}>
Twenty One Pilots
</Typography>
</div>
<div className={classes.grow} />
<div>
<IconButton style={{ color: 'white' }}>
<ShuffleIcon />
</IconButton>
<IconButton style={{ color: 'white' }}>
<SkipPreviousRoundedIcon style={{ fontSize: 30 }} />
</IconButton>
<IconButton onClick={pausetheMusic} style={{ color: 'white' }}>
<PauseCircleOutlineRoundedIcon style={{ fontSize: 46 }} />
<PlayCircleOutlineIcon style={{ fontSize: 46, display: 'none' }} />
</IconButton>
<IconButton style={{ color: 'white' }}>
<SkipNextRoundedIcon style={{ fontSize: 30 }} />
</IconButton>
<IconButton style={{ color: 'white' }}>
<RepeatIcon />
</IconButton>
</div>
<div className={classes.grow} />
<div>
<IconButton style={{ color: 'white' }}>
<VolumeUpIcon />
</IconButton>
</div>
</div>
</AppBar>
</div>
);
}
}
export default withStyles(useStyles)(BottomAppBar);
also, there is a problem with StackOverflow. it says "It looks like your post is mostly code; please add some more details". that's the reason I'm writing some unnecessary things XD
you can skip it.
Thanks for reading. have a good day <3
A common approach for material-ui component styling:
Classical
withStyles (High order function) + createStyles
Functional
useStyles (hooks) + makeStyles
In your code, you shall not use the hooks useStyles inside withStyle, hooks shouldn't be used inside any classical component,
Wrong here
export default withStyles(useStyles)(BottomAppBar);
Right example
import { withStyles, createStyles } from "#material-ui/core/styles";
const styles = theme => createStyles({
root: {
},
// ...
});
...
const { classes } = this.props;
...
export default withStyles(styles)(App);
Online sample for both classical component and functional component styling
Related
This is my site with this issue.
I'm coding a blog in ReactJS. In this article section, I use a mui Tabs and three mui Tabs like this to take apart an article into description, code and others parts. In description and code parts, I use google-code-prettify.
It works when I load the description page but it doesn't work when I click code or others page and then back to the description page.
BasicTabs.js
import React, { useState } from 'react';
import Box from '#mui/material/Box';
import Tab from '#mui/material/Tab';
import Tabs from '#mui/material/Tabs';
import CreateTabPanel from "./TabPanel";
export default function CreateBasicTabs(props) {
const [value, setValue] = useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
function a11yProps(index) {
return {
id: `simple-tab-${index}`,
'aria-controls': `simple-tabpanel-${index}`,
};
}
const boxSx = {
position: 'sticky',
top: props.breadcrumbsHeight + 9.5,
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
}
const boxSxForTablet = {
position: 'sticky',
top: props.appBarHeight - 0.5,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
}
return (
<Box sx={{ width: '100%' }}>
<Box
sx={props.isTablet ? boxSxForTablet : boxSx}
className={`pop-up ${props.isScrolling && 'active shadow-active'}`}
>
<Tabs
value={value}
onChange={handleChange}
aria-label="basic tabs example"
sx={{ paddingLeft: 4 }}
>
<Tab label="Detail" {...a11yProps(0)} sx={{ textTransform: 'none' }} />
<Tab label="Code" {...a11yProps(1)} sx={{ textTransform: 'none' }} />
<Tab label="Others" {...a11yProps(2)} sx={{ textTransform: 'none' }} />
</Tabs>
</Box>
<CreateTabPanel value={value} />
</Box >
);
}
TabPanel.js
import React from 'react';
import Box from '#mui/material/Box';
import PropTypes from 'prop-types';
import Typography from '#mui/material/Typography';
import { data } from "../assets/data";
import { useSearchParams } from "react-router-dom";
function getArticleContent() {
const [searchParams] = useSearchParams();
const articleTitle = searchParams.get('title');
for (const item of data) {
if (articleTitle === item.query) {
return item.content;
}
}
}
function TabPanel(tabProps) {
const { children, value, index, ...other } = tabProps;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
style={{
backgroundColor: 'rgb(255, 255, 255)',
borderRadius: 10,
marginLeft: 30,
marginRight: 30,
marginBottom: 30,
}}
{...other}
className='shadow-active'
>
{value === index && (
<Box
sx={{
p: 3,
marginBottom: 10,
}}
>
<Typography>
{children}
</Typography>
</Box>
)}
</div>
);
}
export default function CreateTabPanel(props) {
return (
<>
<TabPanel value={props.value} index={0}>
<div
dangerouslySetInnerHTML={{ __html: getArticleContent() }}
/>
</TabPanel>
<TabPanel value={props.value} index={1}>
<div
dangerouslySetInnerHTML={{ __html: getArticleContent() }}
/>
</TabPanel>
<TabPanel value={props.value} index={2}>
Item Three
</TabPanel>
</>
);
}
CreateTabPanel.propTypes = {
children: PropTypes.node,
index: PropTypes.number.isRequired,
value: PropTypes.number.isRequired,
};
These are screen captures of when it is loaded and when I back to the page.
The second capture looks like blackout but this is because it's css from google-code-prettify works
pre.prettyprint {
border: 0 solid #888;
}
.prettyprint {
background: #000;
}
Could you tell me why it does not work?
I have a react-native application drawer. In the navigation pane i want to apply background color of orange. Colors are being stored as a constant named as themed and the orange color is named as primary. The navigation is not applying the color to its background. Also i want to rescale the main application screen whenever the navigation panel is opened. That is not working too. I am using react-navigation v6.
This is my app.js file.
import React from 'react';
import {createStackNavigator} from '#react-navigation/stack';
import {NavigationContainer} from '#react-navigation/native';
import CustomDrawer from './navigation/CustomDrawer';
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false,
}}
initialRouteName={'Home'}>
<Stack.Screen name="Home" component={CustomDrawer} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
This is my mainLayout.js file
import React from 'react';
import {View, Text} from 'react-native';
import Animated from 'react-native-reanimated';
const MainLayout = ({drawerAnimationStyle}) => {
return (
<Animated.View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
...drawerAnimationStyle,
}}>
<Text>MainLayout</Text>
</Animated.View>
);
};
export default MainLayout;
This is how my customNavigation.js file looks like
/* eslint-disable react/self-closing-comp */
/* eslint-disable react-native/no-inline-styles */
import React, {useState} from 'react';
import {View, Text, Image, TouchableOpacity} from 'react-native';
import {
createDrawerNavigator,
DrawerContentScrollView,
} from '#react-navigation/drawer';
import {MainLayout} from '../screens';
import {COLORS, FONTS, SIZES, icons, constants, dummyData} from '../constants';
import Animated from 'react-native-reanimated';
const Drawer = createDrawerNavigator();
const CustomDrawerItem = ({label, icon}) => {
return (
<TouchableOpacity
style={{
flexDirection: 'row',
alignItems: 'center',
marginBottom: SIZES.base,
height: 40,
paddingLeft: SIZES.base,
borderRadius: SIZES.base,
//borderColor
}}
// onPress
>
<Image
source={icon}
style={{
height: 20,
width: 20,
tintColor: COLORS.black,
}}
/>
<Text
style={{
marginLeft: 15,
color: COLORS.black,
...FONTS.h3,
}}>
{label}
</Text>
</TouchableOpacity>
);
};
const CustomDrawerContent = ({navigation}) => {
return (
<DrawerContentScrollView
scrollEnabled={true}
contentContainerStyle={{flex: 1}}>
<View
style={{
flex: 1,
paddingHorizontal: SIZES.radius,
}}>
{/* Close */}
<View
style={{
alignItems: 'flex-start',
justifyContent: 'center',
}}>
<TouchableOpacity
style={{
alignItems: 'center',
justifyContent: 'center',
}}
onPress={() => navigation.closeDrawer()}>
<Image
source={icons.cross}
style={{
height: 35,
width: 35,
tintColor: COLORS.black,
}}
/>
</TouchableOpacity>
</View>
{/* Profile */}
<TouchableOpacity
style={{
flexDirection: 'row',
marginTop: SIZES.radius,
alignItems: 'center',
}}
onPress={() => console.log('Profile Button Clicked')}>
<Image
source={dummyData.myProfile?.profile_image}
style={{
height: 50,
width: 50,
borderRadius: SIZES.radius,
}}
/>
<View
style={{
marginLeft: SIZES.radius,
}}>
<Text style={{color: COLORS.black, ...FONTS.h3}}>
{dummyData.myProfile?.name}
</Text>
<Text style={{color: COLORS.black, ...FONTS.body4}}>
View your profile
</Text>
</View>
</TouchableOpacity>
{/* Drawer Items */}
<View
style={{
flex: 1,
marginTop: SIZES.padding,
}}>
<CustomDrawerItem label={constants.screens.home} icon={icons.home} />
<CustomDrawerItem
label={constants.screens.my_wallet}
icon={icons.wallet}
/>
<CustomDrawerItem
label={constants.screens.notification}
icon={icons.notification}
/>
<CustomDrawerItem
label={constants.screens.favourite}
icon={icons.favourite}
/>
{/* Line Divider */}
<View
style={{
height: 1,
marginVertical: SIZES.radius,
marginLeft: SIZES.radius,
backgroundColor: COLORS.lightGray1,
}}></View>
{/* Drawer Items */}
<CustomDrawerItem label="Track Your Items" icon={icons.location} />
<CustomDrawerItem label="Coupons" icon={icons.coupon} />
<CustomDrawerItem label="Settings" icon={icons.setting} />
<CustomDrawerItem label="Invite a Friend" icon={icons.profile} />
<CustomDrawerItem label="Settings" icon={icons.setting} />
<CustomDrawerItem label="Help Center" icon={icons.help} />
</View>
{/* Logout */}
<View
style={{
marginBottom: SIZES.padding,
}}>
<CustomDrawerItem label="Logout" icon={icons.logout} />
</View>
</View>
</DrawerContentScrollView>
);
};
const CustomDrawer = () => {
const [progress, setProgress] = useState(new Animated.Value(0));
const scale = Animated.interpolateNode(progress, {
inputRange: [0, 1],
outputRange: [1, 0.8],
});
const borderRadius = Animated.interpolateNode(progress, {
inputRange: [0, 1],
outputRange: [0, 26],
});
const animatedStyle = {borderRadius, transform: [{scale}]};
return (
<View
style={{
flex: 1,
backgroundColor: COLORS.primary,
}}>
<Drawer.Navigator
overLayColor="transparent"
drawerStyle={{
flex: 1,
width: '65%',
paddingRight: 20,
backgroundColor: 'transparent',
}}
sceneContainerStyle={{
backgroundColor: 'transparent',
}}
screenOptions={{
headerShown: false,
drawerType: 'front',
}}
initialRouteName="MainLayout"
drawerContent={props => {
setTimeout(() => {
setProgress(props.progress);
}, 0);
return <CustomDrawerContent navigation={props.navigation} />;
}}>
<Drawer.Screen name="MainLayout">
{props => (
<MainLayout {...props} drawerAnimationStyle={animatedStyle} />
)}
</Drawer.Screen>
</Drawer.Navigator>
</View>
);
};
export default CustomDrawer;
Instead of switch component I want to use Light Mode and Dark Mode button on Navbar.js and Publish website need to be green on light and change color on dark mode but it not changing
I want to use two button on Navbar instead switch component and publish button background should be green on light mode and change color on dark mode.
App.js
import './App.css';
import React, {useState} from 'react';
import Body from './Body';
import Sidebar from './Sidebar';
import { makeStyles, ThemeProvider } from '#material-ui/core/styles';
import { createMuiTheme, CssBaseline, Switch } from '#material-ui/core';
const useStyles = makeStyles((theme) => ({
root: {
width: "1440px",
display: "flex",
}
}));
function App() {
const classes = useStyles();
const [darkMode, setDarkMode] = useState(false);
const theme = createMuiTheme({
palette: {
type: darkMode ? "dark" : "light",
}
})
const handleDarkMode = () => {
setDarkMode(!darkMode);
}
return (
<ThemeProvider theme={theme}>
<CssBaseline>
<Switch onChange={handleDarkMode} value={darkMode} />
<div className={classes.root}>
<Sidebar />
<Body />
</div>
</CssBaseline>
</ThemeProvider>
);
}
export default App;
Sidebar.js
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
root: {
width: "260px",
// border: "1px solid black"
}
}));
function Sidebar() {
const classes = useStyles();
return (
<div className={classes.root}>
<h1>Hi</h1>
</div>
)
}
export default Sidebar;
Body.js
import React from 'react';
import Navbar from './Navbar';
import { makeStyles } from '#material-ui/core/styles';
import Builder from './Builder';
const useStyles = makeStyles((theme) => ({
root: {
width: "1180px",
height: "100%",
padding: "15px",
// border: "1px solid black",
// backgroundColor: "#f4f5f7",
}
}));
function Body() {
const classes = useStyles();
return (
<div className={classes.root}>
<Navbar />
<Builder />
</div>
)
}
export default Body
Navbar.js
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Brightness4Icon from '#material-ui/icons/Brightness4';
import Brightness7Icon from '#material-ui/icons/Brightness7';
import Button from '#material-ui/core/Button';
import OpenInNewIcon from '#material-ui/icons/OpenInNew';
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
justifyContent: "space-between"
},
leftNav: {
justifyContent: "center",
alignItems: "center",
borderRadius: "12px",
},
lightMode:{
justifyContent: "center",
alignItems: "center",
border: "none",
fontSize: "15px",
padding: "10px",
borderRadius: "12px",
textTransform: "none",
},
darkMode:{
justifyContent: "center",
alignItems: "center",
border: "none",
fontSize: "15px",
padding: "10px",
borderRadius: "12px",
textTransform: "none",
},
rightNav: {
justifyContent: "center",
alignItems: "center",
marginTop: "10px",
},
preview:{
marginRight: "15px",
textDecoration: "none",
justifyContent: "center",
alignItems: "center",
fontSize: "13px",
"&:hover": {
textDecoration: "underline",
}
},
publish:{
marginLeft: "15px",
textDecoration: "none",
backgroundColor: "#02AA02",
color: "white",
padding: "12px",
paddingLeft: "18px",
paddingRight: "18px",
borderRadius: "18px",
fontSize: "13px",
},
lightClick: {
backgroundColor: "red",
},
icons: {
marginRight: "8px",
}
}));
function Navbar() {
const classes = useStyles();
return (
<div className={classes.root}>
<div className={classes.leftNav}>
<Button variant="text" color="default" className={classes.lightMode} onClick={classes.lightClick}>
<Brightness7Icon className={classes.icons} />
Light mode
</Button>
<Button variant="text" color="default" className={classes.darkMode} onClick={classes.darkClick}>
<Brightness4Icon className={classes.icons} />
Dark mode
</Button>
</div>
<div className={classes.rightNav}>
<a href="#" className={classes.preview}>
Preview in new tab
<OpenInNewIcon fontSize="small" style={{fontSize: "15px", marginLeft: "5px"}} />
</a>
<a href="#"className={classes.publish}>Publish Website</a>
</div>
</div>
)
}
export default Navbar
Builder.js
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import { Grid, Paper, Tabs, Tab } from '#material-ui/core';
import DesktopMacIcon from '#material-ui/icons/DesktopMac';
import TabletMacIcon from '#material-ui/icons/TabletMac';
import PhoneIphoneIcon from '#material-ui/icons/PhoneIphone';
const useStyles = makeStyles((theme) => ({
/* hidden preview's nav tab on mobile devices */
previewTab: {
// [theme.breakpoints.up('sm')]: {
// display: 'flex',
// },
// display: 'none',
},
builder: {
width: '100px',
height: '100px',
color: "white",
display: 'inline'
},
webPreviewContainer: {
textAlign: 'center',
},
}));
const Builder = () => {
const classes = useStyles();
return (
<Grid container direction='row' justify='center' alignItems='flex-start' spacing={4}>
<Grid
container item xs={12} md={12} lg={10}
justify='center' direction='row'
spacing={2}>
<Grid
item xs={12}
justify='center'
className={classes.previewTab}>
<Paper style={{width: "100%", marginTop: "20px",}}>
<Tabs
indicatorColor='primary'
textColor='primary'
centered
variant="fullWidth"
>
<Tab icon={<DesktopMacIcon />} label='Desktop' />
<Tab icon={<TabletMacIcon />} label='Tablet' />
<Tab icon={<PhoneIphoneIcon />} label='Mobile' />
</Tabs>
</Paper>
</Grid>
</Grid>
</Grid>
);
};
export default Builder;
Hello Everyone i have the exact same problem with this one. but the question has no answer yet
im stuck with this all day there is no answer to found i am using the latest react native and latest react navigation package
React navigation focus on input blurs immediately
so this is my form page where at the first load blurs text input when i click the text box
import React, { Component } from 'react'
import { View, Dimensions } from 'react-native'
import {
Container,
Content,
Button,
Text,
Form,
Item,
Input,
Label,
Textarea
} from 'native-base';
import Ion from 'react-native-vector-icons/Ionicons'
class Compose extends Component{
render(){
return(
<Container>
<Content>
<Form style={{ padding: 10 }}>
<Item inlineLabel style={{ marginBottom: 15 }}>
<Ion name="ios-person" size={25} style={{ marginRight: 12 }}/>
<Label>Product Name*</Label>
<Input
/>
</Item>
<Item inlineLabel style={{ marginBottom: 15 }}>
<Ion name="md-pricetags" size={25} style={{ marginRight: 12 }}/>
<Label>Price*</Label>
<Input
/>
</Item>
<Item inlineLabel style={{ marginBottom: 15 }}>
<Ion name="md-arrow-down" size={25} style={{ marginRight: 12 }}/>
<Label>Drop rate*</Label>
<Input
/>
</Item>
<Item inlineLabel style={{ marginBottom: 15 }}>
<Ion name="md-phone-portrait" size={25} style={{ marginRight: 12 }}/>
<Label>Contact number*</Label>
<Input
/>
</Item>
<Textarea
rowSpan={5} bordered
placeholder="Description"
style={{ marginBottom: 15 }}
/>
<Button block success style={{ height: 60, marginBottom: 14 }}>
<Ion name="md-images" size={25} style={{ color: 'white' }}/>
<Text style={{ fontSize: 20 }}>Upload Photos</Text>
</Button>
<Button block danger>
<Ion name="ios-cellular" size={25} style={{ color: 'white' }}/>
<Text>Broadcast</Text>
</Button>
</Form>
</Content>
</Container>
)
}
}
export default Compose
and here is my navigation component
import React, { Component } from 'react';
import { Text } from 'react-native'
//Navigation
import 'react-native-gesture-handler';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator, TransitionPresets } from '#react-navigation/stack';
//Screens
import { Welcome, Compose } from './src/index'
import {
Header,
Left,
Button,
Icon,
Body,
Title,
Right
}
from 'native-base'
const Stack = createStackNavigator();
const AppbarList = {
welcome: function(navigation){
return null
},
compose: function(navigation){
return (
<Header>
<Left>
<Button transparent rounded>
<Icon name='arrow-back' onPress={()=>{ navigation.goBack() }}/>
</Button>
</Left>
<Body>
<Title></Title>
</Body>
<Right />
</Header>
)
}
}
const Appbar = ( scene, navigation )=> {
const { options } = scene.descriptor;
const title = scene.route.name;
return AppbarList[title.toLowerCase()](navigation)
}
class App extends Component{
render(){
return(
<NavigationContainer>
<Stack.Navigator
headerMode="screen"
screenOptions={{
header: ({ navigation, scene, previous }) => Appbar( scene, navigation )
}}
>
<Stack.Screen
name="Welcome" component={Welcome}
options={{
...TransitionPresets.FadeFromBottomAndroid,
}}
/>
<Stack.Screen
name="Compose" component={Compose}
options={{
...TransitionPresets.FadeFromBottomAndroid,
}}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
}
export default App;
I faced the same problem. Try to disable gestures for Android.
export default () => {
const isAndroidPlatform = isAndroid();
return {
mode: 'modal',
headerMode: 'none',
defaultNavigationOptions: {
gestureEnabled: !isAndroidPlatform,
cardOverlayEnabled: true,
...(
isAndroidPlatform
? TransitionPresets.FadeFromBottomAndroid
: TransitionPresets.ModalPresentationIOS
),
},
};
};
I recently learn react native, but i got problem with input text. When i try to type 1st text field the 2nd text field cannot get focus, when i tap 2nd text field two times text field focus correctly
See video below : https://streamable.com/70njw
My code :
import React, { Component, Fragment } from 'react'
import { View, StyleSheet } from 'react-native'
import { Text, Button, Content, Card, CardItem, Body, Input, Icon, Item} from 'native-base'
import { Grid, Row } from 'react-native-easy-grid'
import ThemeVariable from '../../../native-base-theme/variables/platform'
import AuthHeaderNavigation from '../../components/auth/HeaderNavigation'
class LoginScreen extends Component {
state = {
input: {
email: null,
password: null
}
}
setInputState(key, value) {
this.setState(prevState => ({
input: {
...prevState.input,
[key]: [value]
}
}))
}
render() {
return (
<Fragment>
<AuthHeaderNavigation/>
<Grid>
<Row style={styles.firstRow}></Row>
<View style={styles.authWrapper}>
<Card style={styles.authCard}>
<CardItem>
<Body>
<Item>
<Icon style={{ color: ThemeVariable.footerDefaultBg }} name="person"/>
<Input onChangeText={text => this.setInputState('email', text)} placeholder="Email"/>
</Item>
</Body>
</CardItem>
<CardItem style={{ paddingTop: 0}}>
<Body>
<Item last>
<Icon style={{ color: ThemeVariable.footerDefaultBg }} name="lock"/>
<Input onChangeText={text => this.setInputState('password', text)}
secureTextEntry={true}
placeholder="Password"/>
</Item>
</Body>
</CardItem>
<CardItem>
<Body>
<Button block>
<Text> Login </Text>
</Button>
</Body>
</CardItem>
</Card>
</View>
<Row style={styles.secondRow}></Row>
</Grid>
</Fragment>
)
}
}
const styles = StyleSheet.create({
content: {
height: '100%'
},
firstRow: {
backgroundColor: ThemeVariable.footerDefaultBg
},
secondRow: {
backgroundColor: ThemeVariable.contentBaseBgColor
},
authWrapper: {
position: 'absolute',
width: '100%',
height: '100%',
flex: 1,
alignItems: 'center',
justifyContent: 'center',
flexDirection:'row',
},
authCard: {
width: '90%',
borderRadius: 6,
padding: 5,
}
})
export default LoginScreen
If i change View to ScrollView everything works correctly, but may broken page design