Despite trying several ways to load the image for the backgroundImage property, it never shows up in page. Loading external images (for example from google) works as expected.
I tried:
backgroundImage: `url(${Papyrus})`
backgroundImage: "url(" + Papyrus + ")"
backgroundImage: "url(../../assets/images/papyrus.png)"
backgroundImage: Papyrus
backgroundImage: "url(\"../../assets/images/papyrus.png\")"
backgroundImage: "url(assets/images/papyrus.png)"
NONE of them work. The image is loaded when I look at my network audit, I can find it in the static folder, but it's never displayed.
App.tsx
import React from 'react';
import makeStyles from './app-styles';
import {Container} from "#material-ui/core";
import Description from "../description/description";
const App: React.FC = () => {
const classes = makeStyles();
return (
<div className="App">
<Container maxWidth={"xl"}>
<div className={classes.row}>
<Description/>
</div>
</Container>
</div>
);
};
export default App;
description.tsx
import * as React from "react";
import makeStyles from './description-styles';
interface DescriptionProps {
}
const Description: React.FC<DescriptionProps> = () => {
const classes = makeStyles();
return (
<div className={classes.descriptionCard}>
<p>Some text</p>
</div>
)
};
export default Description;
description-styles.tsx
import makeStyles from "#material-ui/core/styles/makeStyles";
import Papyrus from "../../assets/images/papyrus.png";
export default makeStyles(theme => ({
descriptionCard: {
backgroundImage: `url(${Papyrus})`,
// margin: 'auto',
height: '25vh',
width: 'calc(20vw * 0.54 - 2%)',
borderRadius: 8,
display: 'flex',
marginLeft: '10px',
marginTop: '10px'
},
text: {
}
}))
Add some additional properties to the background image and it will work -
descriptionCard: {
backgroundImage: `url(${Papyrus})`,
backgroundPosition: 'center',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
// margin: 'auto',
height: '25vh',
width: 'calc(20vw * 0.54 - 2%)',
borderRadius: 8,
display: 'flex',
marginLeft: '10px',
marginTop: '10px'
}
I'm not sure why we need these additional properties (maybe someone could add to the answer), but sometimes the image needs certain behaviour to be defined, like size, position, etc.
You should write it line this:
backgroundImage: `url(images/papyrus.png)`
And it should work.
This way works for me
import LaptopImage from "../../assets/laptop.jpg";
...
const useStyle = makeStyles((theme) => ({
wrapper:{
backgroundImage: `url(${LaptopImage})`,
height: '100vh'
}
})
Its the bare minimum. Rest you can align it properly.
use props, try this:
const useStyles = makeStyles({
bg: props => ({
backgroundImage: \`url(${props.backgroundImage})\`
})
})
In React, you can import a picture first, after that use it as a component.
import yourPicture from './assets/img/yourPicture.png'
...
const userStyles = makeStyles({
root: {
backgroundImage: `url(${yourPicture})`,
minHeight: '100vh', // set height size 100%
},
})
I've been facing this problem all morning. Here is how I fixed. First, import the image then add it to the string:
import banner_background from "./banner_background.png";
backgroundImage: `url(${banner_background})`
Related
I'm using Material UI 5.10.11 and the MuiAlert component sometimes goes wrong.
This is what it should looks like when severity='error'
However in some pages, it looks like this
Below are my codes. Can anyone have a look at it and try to figure out what's wrong with my work?
import React, { useState, useEffect } from 'react';
import { Snackbar } from '#mui/material';
import MuiAlert from '#mui/material/Alert';
const Alert = React.forwardRef(function Alert(props, ref) {
return <MuiAlert elevation={24} ref={ref} variant="filled" {...props} />;
});
export default function MessageDialog(props) {
const defaultPosition = {
vertical: 'top',
horizontal: 'center'
};
const autoHideDuration = 5000;
const [open, setOpen] = useState(false);
useEffect(() => {
let timeoutId;
if (props.open) {
setOpen(true);
timeoutId = setTimeout(() => {
setOpen(false);
}, autoHideDuration);
}
return () => {
clearTimeout(timeoutId);
};
}, [props.open]);
return (
<>
<Snackbar
anchorOrigin={{
vertical: defaultPosition.vertical,
horizontal: defaultPosition.horizontal
}}
open={open}
>
<Alert severity={props.type} sx={{ width: '100%' }}>
{props.children}
</Alert>
</Snackbar>
</>
);
}
Many thanks in advance!
The fault is due to the css that I spotted out in the screenshots.
It looks like problem comes from Mui component class name which is MuiPaper-root. In page with white background it overrites because probably some other Mui components have same class name and you are using white background with this component or you have a css file with white background assigned to MuiPaper-root class in that page
In my React Native (Expo) application, I wanted to upgrade React Navigation from V5 to V6. However, I could not make TextInput in stack navigator header full-width. I tried 'auto' and '100%' for the width value in styling, however neither helped with a real wide textbox.
Here is the link for Expo snack for reproduction: https://snack.expo.io/#vahdet/reactnavigation6-headerbar and the App.js content from it is below. I guess I am short of some flexbox knowledge in headerSearchBarStyle:
import React, { useLayoutEffect, useState } from 'react';
import { Text, TextInput, View, StyleSheet } from 'react-native';
import { NavigationContainer, useNavigation } from '#react-navigation/native';
import { enableScreens } from 'react-native-screens';
import { AppearanceProvider } from 'react-native-appearance';
import { StatusBar } from 'expo-status-bar';
import { createStackNavigator } from '#react-navigation/stack';
enableScreens();
const HomeStack = createStackNavigator();
const Search = () => {
const navigation = useNavigation();
const [searchText, setSearchText] = useState('');
// Customize header
useLayoutEffect(() => {
navigation.setOptions({
headerTitle: () => (
<TextInput
style={styles.headerSearchBarStyle}
value={searchText}
onChangeText={(val) => setSearchText(val)}
containerStyle={styles.searchBarContainerStyle}
placeholder="Search..."
returnKeyType="search"
textContentType="none"
cancelButtonTitle="Cancel"
/>
)
})
}, [navigation, searchText]);
return (
<View style={styles.view}>
{!searchText ? (
<Text>Search results go here</Text>
) : (
<Text>Initial (no search) content goes here</Text>
)}
</View>
)
}
const App = () => {
return (
<AppearanceProvider>
<StatusBar style="auto" />
<NavigationContainer>
<HomeStack.Navigator initialRouteName="Search">
<HomeStack.Screen name="Search" component={Search} />
</HomeStack.Navigator>
</NavigationContainer>
</AppearanceProvider>
);
}
const styles = StyleSheet.create({
headerSearchBarStyle: {
width: 'auto', // also tried '100%'
borderColor: 'black',
borderWidth: 1,
backgroundColor: 'transparent'
},
});
export default App;
EDIT: After Kartikey's approach I want to elaborate that by full-width, I do not necessarily mean the full screen width: There may be scenarios with headerLeft (e.g. back button) or headerRight components at the same time.
Use Device Width
import { Dimensions } from "react-native";
const ScreenWidth = Dimensions.get('window').width;
and
headerSearchBarStyle: {
width: ScreenWidth,
borderColor: 'black',
borderWidth: 1,
backgroundColor: 'transparent',
margin: 10,
},
You can also set it to width: ScreenWidth - 30, just to give some margin
Working Example
<AppBar className={classes.header}/>
The suspect
const classes = useStyles();
const useStyles = makeStyles((theme: Theme) =>
createStyles({
header: {
borderTop: '10px',
borderTopColor: '#367BB5'
},
grow: {
flexGrow: 1
},
menuButton: {
marginRight: theme.spacing(2),
}
);
The grow, and menuButton styling came from the AppBar code directly from Material Ui, but I am trying to implement the header style into the AppBar, unsuccessfully, I have read the documentation but its not very clear to me.
export default Header;
EDIT:
The docs say that the Style sheet name: MuiAppBar but whenever I change header to that, it doesn't change anything
const useStyles = makeStyles({
root: {
position: 'static', // doesnt work
borderTop: '100px', // doesnt work
borderTopColor: '#367BB5', // doesnt work
backgroundColor: '#fafafa',
},
})
<AppBar position="static" classes={{ root: classes.root }}>
Doing this allows me to change the backgroundColor, but the other properties don't work. Not sure why
It's important that you follow this page: https://material-ui.com/customization/theming/
You need to use the ThemeProvider in order to custom the style.
So I'm trying to immitate the reddit text field implementation from material-ui, I've gone ahead and setup this custom component, but I'm getting a invalid hook call error everytime I run on the const classes=... Line
Here's the code:
import React, { Component } from "react";
import { TextField } from "#material-ui/core";
import { fade, makeStyles } from "#material-ui/core/styles";
import styles from "./LNTextField.module.css";
const useStylesReddit = makeStyles(theme => ({
root: {
border: "1px solid #e2e2e1",
overflow: "hidden",
borderRadius: 4,
backgroundColor: "#fcfcfb",
transition: theme.transitions.create(["border-color", "box-shadow"]),
"&:hover": {
backgroundColor: "#fff"
},
"&$focused": {
backgroundColor: "#fff",
boxShadow: `${fade(theme.palette.primary.main, 0.25)} 0 0 0 2px`,
borderColor: theme.palette.primary.main
}
},
focused: {}
}));
class LNTextField extends Component {
render() {
var classNames = require("classnames");
const classes = useStylesReddit();
return (
<TextField
InputProps={{ classes, disableUnderline: true }}
{...this.props}
/>
);
}
}
export default LNTextField;
Also since I just copied it I'm not sure how I can type this code in a seperate css files and refer to the hover and focused bits appropriately, so If you could also tell me how to do that that'd be great. Thanks!
According to React, you are getting this error because:
You can’t use Hooks inside of a class component
Convert your class component to functional component:
const LNTextField = props => {
var classNames = require("classnames");
const classes = useStylesReddit();
return (
<TextField
InputProps={{ classes, disableUnderline: true }}
{...props}
/>
);
}
// react-native example
import { StyleSheet, View } from 'react-native';
const styles = {
container: {
borderRadius: 4,
borderWidth: 0.5,
borderColor: '#d6d7da',
}
}
const stylesRN = StyleSheet.create(styles);
<View style={stylesRN.container}></View>
What the best way to reuse
// inner styles
{
borderRadius: 4,
borderWidth: 0.5,
borderColor: '#d6d7da',
}
in both react-native and react?
What i want to achieve in pseudocode (or another way of reuse in React):
<div style={magicAdapter(styles.container)}>Hello World!</div>
Problem: It is impossible to reuse all react-native inline-styles in react as is without magicAdapter.
What you could do is store all your styles in an object in some file e.g. const containerStyles = { borderRadius: 2 }, export it, then for React Native use the StyleSheets javascript class to create the styles for your div container
import {containerStyles} from '../someFile.js'
const styles = StyleSheets.create({
container: containerStyles
})
then for React you could do inline styling with the same object, but be aware that not all styles supported in StyleSheets can be used for inline styling, so if you want to do something equivalent there's libraries out there like emotion.js to dynamically load CSS in JS
https://github.com/emotion-js/emotion
Heres an example
import {css} from 'emotion'
import {containerStyle} from '../someFile'
const getContainerStyles = css`
border-radius: ${containerStyle.borderRadius}
`
export default class SomeClass extends Component {
render() {
return(
<div
style={getContainerStyles}
>
</div>
)
}
}
I hope this helps
You could concatenate the style of your new component with the style of container, like below
const styles = StyleSheet.create({
container: {
borderRadius: 4,
borderWidth: 0.5,
borderColor: '#d6d7da',
},
newComponent:{
// New component style
}
});
<View style={[styles.container, styles.newComponent]}>
</View>
// your component file name (button.js)
import React, { Component } from 'react';
// import the style from another file present in the same directory
import styles from 'button.style.js';
// you can reuse this style in another component also
class Button extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.buttonText}> Press Me! </Text>
</View>
);
}
}
export default Button;
// your style file name ( "button.style.js")
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
container: {
padding: 10,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#43a1c9',
},
buttonText: {
fontSize: 20,
textAlign: 'center'
}
});