Looking for a way to change the background-image of a jumbotron component
this is what I've tried but no luck:
class Jumbo extends Component {
render() {
var styles ={
"background-image":"http://worldkings.org/Userfiles/Upload/images/Yale.jpg"
}
return (
<div>
<Jumbotron style={styles}>
<h1>Public Art</h1>
<br/>
<p>
A crowd-sourced archive of art in public spaces.
</p>
<Button bsStyle="primary" href="#" >Learn more</Button>
<Button bsStyle="primary" href="#" >Submit a Piece</Button>
{/*link these!*/}
</Jumbotron>
</div>
);
}
}
any pointers?
Apparently you have to use backgroundImage instead of "background-image" for inline styles according to React doc's example:
const divStyle = {
color: 'blue',
backgroundImage: 'url(' + imgUrl + ')',
};
function HelloWorldComponent() {
return <div style={divStyle}>Hello World!</div>;
}
Taken From: https://reactjs.org/docs/dom-elements.html
style
The style attribute accepts a JavaScript object with camelCased
properties rather than a CSS string. This is consistent with the DOM
style JavaScript property, is more efficient, and prevents XSS
security holes.
Found a great solution here. I know this is old but it's the first result that comes up when searching the problem. Future react bootstrappers, enjoy!
First, import your image normally:
import bgimage from '../image_background.png'
Then you can apply the style to your tag like so:
<Jumbotron style={{ backgroundImage: `url(${bgimage})`, backgroundSize: 'cover' }}>
Related
have problem with avatar, when I change size (28, 18, 16) - everything is fine.
But when I change size to 24, 22, 20 and other - image is hidden.
Here is my screenshots and code:
Img Component:
import Image from "next/image";
function Img(props) {
return (
<>
<div className={`relative flex h-[${props.size}px] w-[${props.size}px]`}>
<Image
src={
"https://images.unsplash.com/photo-1509967419530-da38b4704bc6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2095&q=80"
}
alt="image"
fill
style={{
objectFit: "cover",
borderRadius: "999px",
}}
/>
</div>
</>
);
}
export { Img };
import { Img } from "../../elements/common/Img";
export default function AvatarPage() {
return (
<>
<div className="flex p-24">
<Img size={14} />
</div>
</>
);
}
Example 1
Example 2
What I do wrong?
Example 3 - if I change size to 38px the image will appear
That is simply not how Tailwind works.
Tailwind just-in-time basically scrapes all of your files (that matches paths in your content from tailwind.config.js) for existing classes and add them to the final distributed CSS. It is totally impossible to create Tailwind dynamic classes via props. You should use style= to add Height.
As a little tip, in the case the possible classes to be generated would be predictable (not [] values, but Tailwind classes), you can make usage of safelist which you can find the documentation here.
I can't find any examples of accordions where the active class is related to an element outside of the accordion. I'm trying to get an image to change on the side of the accordion, where each image is related to a specific object. I managed to get something working using absolute positioning, but I'm looking for a more elegant solution so I can manipulate styling better.
I can get it to work while the image is inside the accordion under the info text, but can't figure out the styling issue. I think I need to do some refactoring or do away with the array mapping to get it to work but I'm not sure.
Here is a codesandbox of more or less what I want to achieve but without the restriction of absolute positioning - https://codesandbox.io/s/ecstatic-taussig-f084t?file=/src/App.js
You can remove your img tag from your renderedItems and do something like this:
import React, { useState } from "react";
const Accordion = ({ items }) => {
const [activeIndex, setActiveIndex] = useState(0);
const onTitleClick = (index) => {
setActiveIndex(index);
};
const renderedItems = items.map((item, index) => {
const active = index === activeIndex ? "active" : "";
return (
<div key={item.title}>
<div className={`title ${active}`} onClick={() => onTitleClick(index)}>
<i className="dropdown icon"></i>
{item.title}
</div>
<div className={`content ${active}`}>
<p>{item.content}</p>
</div>
</div>
);
});
return (
<div className="container-gallery">
<div className="ui styled accordion">{renderedItems}</div>
<img
className={`content `}
src={`${items[activeIndex].image}`}
style={{
height: "200px",
width: "200px"
}}
alt="img"
/>
</div>
);
};
export default Accordion;
And for the style I don't know what you are using so I made css for the example:
.container-gallery{
display:flex;
flex-wrap:no-wrap;
justify-content: space-between;
}
here a sandBox link
I appreciate this may be a little basic here, but I'm relatively new to React and am testing the waters with various ways of applying on-the-fly styling rather than creating separate stylesheets and importing them.
I'm trying to experiment adding styles to three different elements - one via inline styles, another via a style tag, and another via a style variable - where only the inline style seems to work.
Here is my code with all 3 elements:
import React from 'react'
const App = () => {
render {
const testOneStyle = {
color: "red",
fontWeight: "bold"
};
return (
<div>
<span style={testOneStyle} className="test-one">test 1</span>
<span className="test-two">test 2</span>
<style>
.test-two {
color: red;
font-weight: bold
}
</style>
<span style={{color: "red"}} className="test-three">test 3</span>
</div>
)
}
}
export default App
Firstly, does the variable style (i.e. here) only work with class components rather than functional components?
And can someone explain why this is not rendering and how to render and apply the styles?
Thank you for any advice. Here is a StackBlitz demo: https://stackblitz.com/edit/react-tjukup
Unfortunately, <style> tags don't work in JSX the way they do in html. You are going to have to parse the the string appropriately yourself, since JSX is just javascript with syntactical sugar to convert into React.createElement() function with the right parameters. So you want to generally avoid style and head tags in JSX, but if you do, you want to use it like:
<style>
{"\
.test-two {\
color: red;\
font-weight: bold;\
}\
"}
</style>
EDIT
Also, to answer your question "does the variable style only work with class components rather than functional components?", no. The prop style is a JSX prop and works regardless of what kind of component you are using.
EDIT
And the reason why your component is not rendering, is because render() is a function that is only used in class based components. In a functional component you just directly return the JSX.
import React from "react";
const App = () => {
const testOneStyle = {
color: "red",
fontWeight: "bold"
};
return (
<div>
<span style={testOneStyle} className="test-one">
test 1 - fails
</span>
<span className="test-two">test 2 - fails</span>
<style>
{`
.test-two {
color: red;
font-weight: bold
}
`}
</style>
<span style={{ color: "red" }} className="test-three">
test 3 - works
</span>
</div>
);
};
export default App;
EDIT
As you may have observed in the snippet I have provided, you can also use strings with "`" to make it easier to enter strings in JSX
I hope this may helps you
import React from 'react'
const App = () => {
const testOneStyle = {
color: "blue",
fontWeight: "bold"
};
return (
<div>
<span style={testOneStyle} className="test-one">
test 1 - fails
</span>
<span className="test-two">
test 2 - fails
</span>
<style>
{
`.test-two {
color: green;
font-weight: bold
}`
}
</style>
<span style={{color: "red"}} className="test-three">
test 3 - works
</span>
</div>
)
}
export default App
Explaination:
You are using functional component
Class component require render method to return a JSX. Functional component can directly return JSX.
you can add style tag in your JSX but the context inside need to be string.
How can both a class plus additional CSS be applied when Emotion is used with the className prop in React?
For example, how can one add a class myClass to the following?
import {css} from 'emotion'
<div className={css`color: red`}>
I've never used Emotion but it looks like you can simply add your class and another template string around the css function.
<div className={`myClass ${css`color: red`}`}>
I tested this with one of their inline editors on a page in their Introduction then checked the markup. Seemed to work.
You can use composes with regular classes or classes from a css module
<div className={css`
composes: ${'some-class'};
color: red;` >
May be this can help you if you are still stuck click here
emotion v11 answer
import { css, ClassNames } from '#emotion/react'
const orange = css`color:orange;`
const bold = css`font-weight:bold;`
render(
<>
Using ClassNames
<br/>
<ClassNames>
{({ css, cx, theme }) => (
<>
<div className={`case1 ${css`color:red;`}`}>Case1</div>
<div className={cx('case2', css`color:green;`)}>Case2</div>
<div className={cx('case3', css`${orange}`)}>Case3</div>
<div className="Case4" css={orange}>Case4</div>
<div className="Case6" css={[orange, bold]}>Case5</div>
<div className={cx('case6', orange)}>Case6 (not working)</div>
</>
)}
</ClassNames>
<br/>
without ClassNames
<br/>
<>
<div className={`raw1 ${css`color:red;`}`}>Raw1 (now working)</div>
<div className="raw2" css={orange}>Case4</div>
<div className="raw3" css={[orange, bold,'abc']}>Case5 (no abc)</div>
</>
</>
)
I got React noob question.. The thing is that I have a method with a mount of JSX attributies with their respective properties.
The question is, how can I get to the imageUrl attribute a style? such as give border-radius: 10px or centering in the page.
xxxx (item:aaaa, index:bbb) {
return (
<div className="Post ms-u sm3 ms-u-lg3 ms-u-xl">
<div className="content">
<PersonaControl
id={"BlogItem" + index}
identifier={item.blogOwnerEMail}
displayName={item.blogOwnerName}
size={PersonaSize.extraLarge}
hidePersonaDetails={true}
imageUrl={item.blogLeaderPicture && item.blogLeaderPicture}
labels={this.props.labels}
/>
Here is the render method. I try to double the information of the property xxxx how calls me the content of the parameter aaaa:
render() {
return (
<div className="clearBoth"></div>
<div className="bandContent" style={{ backgroundColor: this.props.backgroundColor }}>
{this.state.leadershipBlogDataItems.map(i => {return this.leadershipBlogDataItems(i, this.state.leadershipBlogDataItems.indexOf(i))})}
<div className="blogPost"></div>
You simply have to add a style property. You can do this by adding:
<div style={{ border: "1px" }} > </div>
If you want to add the "classic" css, with a file, simply add a className to the div, and import the css file as shown below.
import "./style.css";
<div className="yourstylename"> </div>
Inside style.css you simply add your css. By the way, the import shown above only works if the css file is in the same folder as your component/js file.