import Background from './img/steamledges.jpg';
const myStyles = {
backgroungImage: `url( ${Background} )`,
height: '50vh',
backgroungSize: 'cover',
}
i tried using this code and it didn't work.
What I understand from your problem, is you want to add an image using the inline-style backgroundImage right ?
What about this ? Instead of using your image as a component because it won't works. Only SVG can be used as component when you import them.
Check it out :
`backgroundImage: require('./path/to/your/img.extension)`
Tell me if you've solved the problem
Related
Using Mui styled function to style both jsx elements and MUI components. The displayName is not showing when I debug the element in Chrome or any browser for that matter.
Anyone know how to fix this.
I'm using Vite for my setup.
const MyComponent = styled('div')`
display: flex;
`;
As you can see from the below screenshot its not showing MyComponent display name instead its showing css-1vht943
You can see class only inside the Element tab. When you click on one of the lines which contains the class name.
You can find all the CSS related to that class under the styles tab including display name for your case. Please check the image below
If you want to have a name I think you can use styled('div', { name: 'MyTheme'}), then you will see something like <div class="css-t7mscw-MyTheme-root"></div>. Don't know if this is what you want, but here it is vaguely mentioned in the doc.
I want to make a carousel, where the background is changing, i don't want to use the <img/> tag! I set the value as described in the documentation: https://tailwindcss.com/docs/background-image#arbitrary-values
My Code:
import React from 'react';
type CarouselProps = {
img: string;
};
const Carousel = ({ img }: CarouselProps) => {
return (
<div
className={`col-span-full bg-[url(${img})] bg-cover grid grid-cols-12 gap-6`}
> ...
</div>
);
};
When i set the String i pass to the Component hardcoded it works but when i use curly Braces and $ it doesn't. In addition i don't want to define my Background-Images in the tailwind.conf.js
The Error:
ERROR in ./src/index.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5]
.use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!
./node_modules/source-map-loader/dist/cjs.js!./src/index.css) 9:36-70
i don't want to define my Background-Images in the tailwind.conf.js
Well you have to. What you're trying to do isn't supported.
The way Tailwind scans your source code for classes is intentionally
very simple — we don’t actually parse or execute any of your code in
the language it’s written in, we just use regular expressions to
extract every string that could possibly be a class name.
so tailwind has no idea what your React code actually means. So it's simply not going to work.
Tailwind does not support dynamic class names:
Don't construct class names dynamically
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
you should customise your theme to include the image url:
You can add your own background images by editing the
theme.backgroundImage section of your tailwind.config.js file:
tailwind.config.js
module.exports = {
theme: {
extend: {
backgroundImage: {
'hero-pattern': "url('/img/hero-pattern.svg')",
'footer-texture': "url('/img/footer-texture.png')",
}
}
}
}
The solution is to use the style attribute. Thanks for helping :)
<div
className="col-span-full bg- bg-cover grid grid-cols-12 gap-6"
style={{
backgroundImage: `url(${img})`,
}}
>
I'm trying to create 3d text using Threejs + react-three/fiber .
I loaded the font using font loader like this :
const font = new FontLoader().parse('/Microsoft Tai Le_Regular.json');
After that I tried to use component inside the mesh , for some reason it didn't work, any other type of Geometry would work .
<mesh>
<textGeometry /> // this can't even be compiled ( maybe it has to do with typescript
</mesh>
With that problem , I tried to create the textGeometry on js instead of jsx So I did this :
const textOptions = {
font: font,
size: props.size,
height: props.height,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 10,
bevelSize: 8,
bevelOffset: 0,
bevelSegments: 5
};
const textGeo = new TextGeometry(props.text, textOptions);
and Passed 'textGeo' to mesh geometry prop
<mesh
geometry={textGeo}
>
still didn't work and gave this error :
can't access property "yMax", data.boundingBox is undefined
Thanks for your help,
So I'll preface this by saying that I'm still a student so I can't explain exactly why all these steps need to be done but here's what worked for me. It seems that your issue is with the path that you are using to parse. The file name itself seems inaccurate but even if the file path is valid, it still will not work, it must be imported. Make sure that your json file is inside of your src folder and import the json file using the relative path.
import myFont from '../relative_path'
Make sure to import extend from r3f
import { extend } from '#react-three/fiber'
Next, textGeometry does not come standard with r3f, so it needs to be imported like so
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
Then extend TextGeometry
extend({ TextGeometry })
This should work to get the textgeometry to compile. Take a look below for the full snippet.
import { extend } from '#react-three/fiber'
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader'
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
import myFont from '../relative_path'
extend({ TextGeometry })
export default function Text() {
const font = new FontLoader().parse(myFont);
return(
<mesh position={[0,10,0]}>
<textGeometry args={['test', {font, size:5, height: 1}]}/>
<meshLambertMaterial attach='material' color={'gold'}/>
</mesh>
)
}
Obviously you can change the args and material to fit your needs.
This has been asked several times but in my use case it's not working. I'm sure I'm missing something.
In a functional component I do:
const headerImg = {
backgroundImage: `http://localhost:1337${data.service.main_image.url}`
};
Then in a div I do the following:
<div className="bread-cumbs-area" style={headerImg}>
I'm attempting to use headerImg.backgroundImage as the background image but it's not displaying in my div. Any idea what I'm doing wrong?
Since you're setting the background image in CSS, you need to use the url() CSS function:
const headerImg = {
backgroundImage: `url('http://localhost:1337${data.service.main_image.url}')`
};
How to set direction property of a View in react-native ... something like:
<View direction="rtl" />
OR
How to force the direction of the whole app to be Right-To-Left ... regardless of the current Device-Language after making my app RTL Ready
I solved this issue by calling forceRTL in MainApplication.java like:
MainApplication.java
import com.facebook.react.modules.i18nmanager.I18nUtil;
#Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
sharedI18nUtilInstance.forceRTL(this,true);
sharedI18nUtilInstance.allowRTL(this, true);
}
AndroidManifest.xml
<Application
...
android:supportsRtl="true"
...
/>
cause calling forceRTL in App.js does require the app to be restarted to work.
I18nManager.forceRTL(true); // Work on second-load of the app
Now when I set flexDirection: 'row' it will be right-to-left
You can just simply use flex-direction. Please see following code snippet
<View style={{ flexDirection: language === ARABIC_LANGUAGE ? 'row-reverse' : 'row' }}/>
Add '\u{200F}' in front of text to change direction to rtl.
_rtlcheck = (language, data) => {
if (rtlLanguages.includes(language)) {
return '\u{200F}' + data
}else{
return data
}
};
Import this in AppDelegate.m :
#import <React/RCTI18nUtil.h>
Add this library: react-native-restart
And simply use it like this in your component ->
import { I18nManager } from "react-native";
import RNRestart from "react-native-restart";
I18nManager.forceRTL(true);
RNRestart.Restart();
Updating components based on RTL ->
const isRTL = I18nManager.isRTL;
Flip Text : textAlign: "left"
Flip TextInput : textAlign: isRTL ? "right" : "left"
Flip Icon / Image : transform: [{ scaleX: isRTL ? -1 : 1 }]
Use below library. it supports RTL for react native and also localization
https://www.npmjs.com/package/react-native-i18n
Hope it will work.