This is what I have:
const weight = "bold";
const someBool = true;
return (
{someBool &&
`This should be ${weight}.`
}
)
I need to add styling to the expression in the object literal. I tried this, but it is returning as This should be [object object]. on the UI:
`This should be ${<span fontWeight="bold">{weight}</span>}.`
How do I do this correctly?
Use a Fragment to group your plain text and element (span) without having a real wrapper element.
I use React.Fragment below because I don't think stackoverflow's babel parser can parse the "short syntax" (<> / </>), but you can also use that in your real application.
In the example below, I used the style prop as well to apply the bolding. Passing a fontWeight prop doesn't work out of the box, you'd need a custom element or something like styled-system.
function App() {
const weight = "bold";
const someBool = true;
return (
someBool && (
<React.Fragment>
This should be <span style={{ fontWeight: "bold" }}>{weight}</span>.
</React.Fragment>
)
);
}
ReactDOM.render(<App />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>
function App() {
const weight = "bold";
const someBool = true;
const style = { fontWeight: "bold" };
return (
someBool && (
<>
This should be <span style={style}>{weight}</span>.
</>
)
)}
ReactDOM.render(<App />, document.getElementById('app'));
There are 4 ways to style your component. Please visit this for deep knowledge.
https://medium.com/technofunnel/4-ways-to-add-styles-to-react-component-37c2a2034e3e
Related
So, I'm trying to create a React App that changes the background image of the body. I did this by giving the body in my index.html an id of "body." I can get this to work with changing the background COLOR just fine. When I try to reassign the background IMAGE, though, I can't seem to get it to work no matter what I try.
This works:
document.getElementById("body").style.backgroundColor = "blue";
This doesn't:
import explosion from "./explosion.png";
function Boom(){
document.getElementById("body").style.backgroundImage = "url('" + {explosion} +
"')";
Why? I've tried writing this many different ways.
this worked for me :
import { useEffect } from "react";
import img from './img.png';
export default function App(){
useEffect(()=>{
document.getElementById('body').style.backgroundImage = `url('${img}')`;
})
return <>
<div id="body"
style={{height:'300px'}}
>
</div>
</>
}
or you can use inline css style :
import img from './img.png';
export default function App(){
return <>
<div id="body"
style={{
height:'300px',
backgroundImage: `url('${img}')`,
}}
>
</div>
</>
}
you need to pass the URL of the image as a string, without wrapping it in curly braces {}
You can try this code
import { useEffect } from "react";
export default function App() {
const bgUrl =
"https://images.unsplash.com/photo-1605106250963-ffda6d2a4b32?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80";
/*useEffect Hook allows you to perform side effects in your components. Such as fetching data, directly updating the DOM, and timers*/
useEffect(() => {
Boom();
}, []);
const Boom = () => {
document.getElementById("body").style.backgroundImage = `url(${bgUrl})`;
};
return (
<div className="App">
<h1>Hello World!</h1>
</div>
);
}
here's a link to the working demo Change Background Image
I am trying to write a react application where the App component renders an array of components to the screen. But the inline CSS are not showing up.
//App component
import data from "./data.js"
import Item from "./Item"
export default function App(){
const cardElements = data.map(item => <Item/>)
return (<div className='app'>
{cardElements}
</div>);
}
//Item component
export default function Item(){
const customStyle = {border: "2px solid black"};
return (<div style={customStyle} >Item component</div>);
}
The inline CSS in the Item component does not reflect on the webpage.
As you can see in the snippet below the inline style does indeed work. What is likely happening here is your style is bering overridden but we'd need more information to know for sure.
Sidenote: don't forget to add key prop when using .map in React.
const data = [1, 2, 3, 4];
function App() {
const cardElements = data.map(item => <Item key={item} />)
return (
<div className='app'>
{cardElements}
</div>
);
}
function Item() {
const customStyle = { border: "2px solid black" };
return <div style={customStyle}>Item component</div>;
}
ReactDOM.createRoot(
document.getElementById("root")
).render(
<App />
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
I'd like to set overflow-y: hidden for the html selector (not an element) based on whether a React class component state variable is true. Is that possible?
If you mean you want to apply the overflow-y to the actual HTML tag then putting this code in the render worked for me
...
render() {
let html = document.querySelector('html');
this.state.test === "test" ? html.style.overflowY = "hidden" : html.style.overflowY = "visible";
return (
....
)
};
You can do
function MyComponent() {
// Set your state somehow
const [something, setSomething] = useState(initialState)
// Use it in your className`
return <div className={!!something && 'class-name'} />
}
If you have multiple class names to work with, a popular package is (aptly named) classnames. You might use it like so:
import cx from 'classnames'
function MyComponent() {
const [something, setSomething] = useState(initialState)
return <div className={cx({
'some-class' : something // if this is truthy, 'some-class' gets applie
})} />
}
Yes, It's possible. You can do this.
function App() {
const [visible, setVisible] = useState(false);
useEffect(() => {
const htmlSelector = document.querySelector("html");
htmlSelector.style.overflowY = visible ? "unset" : "hidden";
}, [visible]);
return (
<button onClick={() => setVisible(prevState => !prevState)}>
Toggle overflow
</button>
);
}
See the full example on CodeSandbox
You can use the style property to set inline CSS:
<div style={{ overflowY: hide ? 'hidden' : 'auto' }}>
So what's the best pratice for using className in react. In specific multiple class names. I'm reading through the documentation and I don't really get a clear answer. I've seen things like:
const divStyle = {
color: 'blue',
backgroundImage: 'url(' + imgUrl + ')',
};
function HelloWorldComponent() {
return <div style={divStyle}>Hello World!</div>;
}
but is there a way for me to do something like this?
import React from 'react';
import ReactDOM from 'react-dom';
import './css/landing.css';
import './css/w3.css';
class Home extends React.Component {
const homeClasses = 'bgimg-1 w3-display-container w3-opacity-min';
render() {
return (
<div className={homeClasses}>
<h1>SUP</h1>
</div>
);
}
}
ReactDOM.render(
<Home />,
document.getElementById('root')
);
or even just list then out in the class name section?
It depends what your component should/will do.
If your component is fairly static you will want to use a built in style like your first example:
const mystyle = {
width: '100%',
...
}
<div style={mystyle}>...</div>
However, there are better ways that allow your component to be more dynamic for re-use, for instance using a class method to generate the style from props passed to it, like in this render function:
render() {
// User's preference or Default Style:
const defaultStyle = {
width: this.props.style.width || '100%',
height: this.props.style.height || '100%',
}
//if this.props.className doesn't exist use mycssclass
const defaultClassName = this.props.className || 'mycssclass'
return (
<div className={defaultClassName} style={defaultStyle}>...</div> )
Following this logic you can use the ternary operator to change the css class name based on props. A common solution is use an isActive state property and use it to determine which class should be used.
render() {
const activeClassName = this.props.className + ' mycomponent-active'
return (
<div className={this.props.isActive ? activeClassName : this.props.className} style={ this.props.style }
</div>);
}
Another common, but complex way to set your component's style is to use a function that will return a given style object, and use it like the first example.
Ultimately, you should decided whether you would like your component to be styled by the designer/user or should look the same no matter where it is used... if it is styled by the designer, just expose the CSS class name from props to the component or define a default:
<div className={this.props.className || 'someclassName'}>...</div>
otherwise, use an example above.
Yes, you can do this! Take a look at the snippet below:
class Example extends React.Component {
cssClasses = 'demo demo2';
render() {
return (
<div className = { this.cssClasses }>
Hello World
</div>
);
}
}
ReactDOM.render( <Example/> , document.getElementById('app'));
.demo {
color: blue
}
.demo2 {
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'></div>
Your error was the definition of the homeClasses. You can't declare it like
const homeClasses = '...';
Because, on the way that you did, homeClasses is a property of your component. You should not use const. Just:
homeClasses = '...';
And you forgot to use the this reference, because the homeClasses is an attribute of your component.
<div className={this.homeClasses}>
<h1>SUP</h1>
</div>
Exists and one away for this problem. You can use and read this data from file (example data.json) where can use this data like props of that.
In my project, I have a Text component:
import React from 'react'
import { bool, string, number, element, func, object, any } from 'prop-types'
import cx from 'classnames'
import s from './styles/Text.css'
const Text = (props) => {
const renderMultiLines = () => {
const items = props.children.split(' ')
return items.map(text => <div style={{ marginBottom: '2px' }} className={s.multiLineItem}>{text}</div>)
}
return (
<div
className={cx(
s.text,
props.ellipsis && s.ellipsis,
props.isUpperCase && s.isUpperCase,
props.isBold && s.bold,
props.isExtraBold && s.extraBold,
props.isExtraSpaced && s.extraSpaced,
props.multiLine && s.multiLine,
props.active && s.underlined,
props.active && s.primary,
s[props.color],
s[props.size],
)}
onClick={props.onClick}
style={props.style}
>
{!props.multiLine && props.children}
{props.multiLine && renderMultiLines()}
</div>
)
}
Text.defaultProps = {
isBold: false,
isExtraSpaced: false,
isExtraBold: false,
children: '',
color: '',
ellipsis: false,
size: 'extraExtraSmall',
isUpperCase: false,
onClick: undefined,
style: {},
active: false,
}
Text.propTypes = {
isBold: bool,
isExtraSpaced: bool,
isExtraBold: bool,
children: any,
color: string,
ellipsis: bool,
size: string,
isUpperCase: bool,
onClick: func,
style: object,
active: bool,
}
export default Text
As you can see, the intention is that you pass in props to change the layout of the text.
The idea is that you only ever end up with a limited amount of styles for text, and you never end up with slight variations.
An example of the usage of this component in my project looks like this:
<Text
onClick={() => this.handleGlobalChangeDate(Number(n))}
isBold
size="medium"
color="primary"
active={Number(n) === activeDay && visibleMonth === activeMonth}
>{n}</Text>
This looks messy, and I feel like isBold, size, color etc should not need to be displayed here and passed in as props. Rather, they should be handled in the CSS and refer to the project's variables.css file.
In this way I would like to be able to attach a className to the Text component in question.
However, because it's a component and not simply a div, for example, the className would merely get passed to the component as a prop.
How can I use CSS to deal with this issue instead of using a multitude of style-related props?
Try classnames, a great way to add classes dynamically based upon props or state.
With this you can do:
var btnClass = classNames({
btn: true,
'btn-pressed': this.state.isPressed,
'btn-over': !this.state.isPressed && this.state.isHovered
});
return <button className={btnClass}>{this.props.label}</button>;
Then apply in your component:
<div className={btnClass}>Something</div>