I am a beginner in Next.js and react and I am trying to use <style jsx> for styling my page.
It works in most cases but when I generate the content on the fly the className styles are not applied.
It is hard to explain by words because I am not familiar yet with the terminology, therefore I will try to explain by example (tried to make it as simple as possible).
Here is my page content:
import React from 'react';
const articles = ["dogs", "cats", "mice"]
function JsxDc() {
const articleJsx = articles.map((art, idx) => (
<li className="articleItem" key={idx}>{art} </li>
));
return (
<>
<div className="pageCont">
<h1>Hello World</h1>
<ul>
{articleJsx}
</ul>
</div>
<style jsx>{`
.pageCont {
color: rgba(100, 100, 100, .5);
}
.articleItem{
color: red;
}
`}</style>
</>
)
}
export default JsxDc;
and here is how I see it in the browser:
I expected to see the article list items colored in red, but this is not the case.
What am I missing - how to make this work?
Thank you!
Related
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
Any hint or help would be greatly appreciated!!
In imageList.js, the following {images} is an array.
How can the return of an string "div" of an array return the below image:
return {images}
display this result like if there is a "\n" new line for each record?:
import React from 'react';
const ImageList = props => {
const images = props.images.map((image) => {
return <img src={image.urls.regular} />
});
console.log(props.images)
return <div>{images}</div>;
}
export default ImageList;
result:
for this you are creating img elements and depending on your css they are taking the entire container width. Solving this would require specifying image sizes for example
div{
display: grid;
grid-template-column: repeat(3, 1fr)
}
or
img{
width: 45%;
}
but in the end, it depends on your styling
Your images list is displayed correctly but you miss the css for it.
you can use the GridList or gird system of material ui
or you build your own design.
here is a sample
<GridList cellHeight={160} className={classes.gridList} cols={3}>
{imagess.map((image) => (
<GridListTile key={image.key} cols={image.cols || 1}>
<img src={image.img} alt={image.title} />
</GridListTile>
))} </GridList>
in the link below you can find more usefull information.
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.
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' }}>
Please consider this typescript function
function button(style: any, func: ()=>void, img: string) {
return (
<button
className="Reader_Button"
style={style}
onClick={func}
>
<img src={img} alt="" />
Back
</button>
);
}
What is the correct type for the first argument style? I feel like it should be something like HTMLElementStyle but I can't find the right incantation.
Sorry, I wasn't sufficiently clear. I want to know what type to use to replace the "any" in style: any. The typescript definitions handle checking the types of the supplied members of the object.
I'm talking about definition of the function, not application.
The type is React.CSSProperties. You can find this in VSCode by writing <div
style={{}}> and pressing F12 when having your cursor in the style attribute.
The style prop on regular DOM elements should be in the form of an object where the keys are the css attributes.
Example:
<div style={{ width: "100%", backgroundColor: "black" }} />
Notice that in the case of attributes containing dashes, they become camel cased. For instance background-color becomes backgroundColor.
React style documentation
CSSStyleDeclaration
It becomes available as soon as you have typescript in your project.
There are some more but I think this is the one.
for me work "import CSS from csstype" && wrap to quotes 'maxHeight': '120px'
import React from 'react';
import CSS from 'csstype';
const shortList = () => {
const listStylus: CSS.Properties = {
'maxHeight': '120px',
'overflow': 'hidden',
}
return (
<div>
<ul style={listStylus} >
<li>Item element 1</li>
<li>Item element 2</li>
</ul>
</div>
)
}
export default shortList