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.
Related
I'm trying to make a Trello like, I'm using react-beautiful-dnd and started from the classical example.
This is where I render the card (I just replaced the div with Task, my component)
<Task
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={{
userSelect: "none",
padding: 16,
margin: "0 0 8px 0",
minHeight: "50px",
...provided.draggableProps.style,
}}
>
{item.content}
</Task>
In my component, I want to get all div attributes passed in the code above.
So I did this :
import React from "react";
const Task: React.FC<JSX.IntrinsicElements["div"]> = (props) => {
const { children } = props;
return (
<div className="card card-green" {...props}>
<div className="card-content">
<div className="content">{children}</div>
</div>
</div>
);
};
export default Task;
It looks good, excepted for the "ref", I got a message in my console when I try to drag my card
Invariant failed: Cannot get dimension when no ref is set
And indeed my ref is always undefined.
Do you have an idea ?
I tried several examples found but no one works. I think I am missing a type somewhere
I want to make my button and status symbol smaller they are way too big for the screen chat.
Here is my JSX file
import React from 'react';
import closeIcon from '../../icons/closeIcon.png';
import onlineIcon from '../../icons/onlineIcon.png';
import './InfoBar.css';
const InfoBar = ({room}) => (
<div className="infoBar">
<div className="leftInnerContainer">
<img className= "onlineIcon" src={onlineIcon} alt="open 6342 56837 Image" />
<h3>{room}</h3>
</div>
<div className="rightInnerContainer">
<img src={closeIcon} alt="close 6342 56837 Image"/>
</div>
</div>
)
export default InfoBar;
Thank you so much
In the attached image you have defined an inline style like this
<div className="leftInnerContainer" style={{"width:60px"},{"height:30px"}}
You have the right idea, but the syntax for the style prop is wrong - hence the compilation error.
It needs to be a plain Javascript object, for which the correct syntax is this
{ width: "60px", height: "30px" }
And in the style prop in JSX, looks like this
<div className="leftInnerContainer" style={{ width: "60px", height: "30px" }}
You should give the css you are importing too given it can be solved through that.
That aside, just pass with either the css or the style prop a max height and/or width and it should work.
Note: if you set a max width or height you don't need to specify the other, just set it to auto and it will retain the proportion.
If you attach the css i can give you additional help.
You can also pass inline styles
<img className= "onlineIcon" src={onlineIcon} style={{height:"20px",width:"20px"}}alt="open 6342 56837 Image" />
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>
</>
</>
)
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' }}>
I'm trying to inject some HTML into a React component (Yes, it is clean) and I'm getting the error:
Can only set one of `children` or `props.dangerouslySetInnerHTML`
However I'm not sure how this applies to this code:
<div className='pure-u-1' style={{ height: '300px' }}>
<div className='blog-list-item-container' style={heroStyle}>
<a as={`/post/${this.props.blogObject.slug}`} href={`/post?id=${this.props.blogObject.slug}`}>
<button className='blog-button' style={buttonStyle} />
</a>
<h1 className='pure-u-md-16-24 pure-u-sm-20-24 blog-list-title' ref={(titleElement) => this.titleElement = titleElement} style={{ marginTop: this.state.titleTop, height: this.state.titleHeight }}>{this.props.blogObject.title}</h1>
</div>
<div dangerouslySetInnerHTML={this.createMarkup(testLine)} />
</div>
I'm only setting dangerouslySetInnerHTML one time.
The createMarkup function:
createMarkup(stringToConvertToHtml) {
return { __html: stringToConvertToHtml }
}
The testLine:
const testLine = '<h3>All you need is X, Y, and center</h3><p>Every single visual element that you will use to build your application has coordinates built into it:</p>'
It is slightly unclear as to what the error is because I imagine it is in createMarkup call. Make sure that your createMarkup is returning an object with the __html property and a string value of the proposed markup. Also, try removing that space between your div tags.
createMarkup(testLine) {
return { __html: '<div>your markup here</div>'}
}
I do that like this.
<div className={styles.activityContent} dangerouslySetInnerHTML={{ __html: this.markDown( item.title ) }}>
And this is my function.
markDown(text){
if(text){
//Here I replace special chars for html tags, this is the example: __ Text in bold __
return text.replace(/__(.*?)__((_+|\W+|$))/g, '<strong>$1</strong>$2');
}
}