I have a div that has some text and then a component that displays some more text:
<div className="text-center">
Sign-in or <SignUpLink />
</div>
I want it to display the text inline like so:
Sign in or Create an account
But instead it is displaying like so:
Sign-in or
Create an account
How can I fix this?
Give SignUpLink a display: inline style.
const SignUpLink = () => {
<div style={{ display: 'inline' }}>
// rest of component
</div>
}
Related
I was wondering how to merge 2 pieces of text together in React JS. Difference is 1 section of the text has its own unique styling. Example code below:
<div>
<div>
{'If you haven\'t recieved an email, please check your spam filter or '}
</div>
<div style={{ color: 'red' }}>
try another email address
</div>
</div>
I have tried using flex and flex direction as row in the parent div, but have had no luck. This is what happens with flex in the parent div.
You could use span (instead of div).
The span tag is an inline container used to mark up a part of a text and it doesn't break to the next line
<div>
<span>
{'If you haven\'t recieved an email, please check your spam filter or '}
</span>
<span style={{ color: 'red' }}>
try another email address
</span>
</div>
I'd like to align some text with a logo on the same line:
<div id="container" style="white-space:nowrap">
<div id="image" style="display:inline;">
<Link href="" target="_blank">
<img
src={img}
loading="lazy"
width="40px"
height="40px"
alt=""
/>
</Link>
</div>
<div id="texts" style="display:inline; white-space:nowrap;">
<strong> 75 </strong>
</div>
</div>
But when I try to run it, I receive these errors:
Line 61:41: Style prop value must be an object react/style-prop-object
Line 62:41: Style prop value must be an object react/style-prop-object
Line 73:41: Style prop value must be an object
In react you need to use in style in object,
https://reactjs.org/docs/dom-elements.html#style
style={{
whiteSpace:'nowrap',
display:'inline',
}}
style prop takes an object.
Full code:
<div id="container" style={{ whiteSpace: "nowrap" }}>
<div id="image" style={{ display: "inline" }}>
<Link href="" target="_blank">
<img src={img} loading="lazy" style={{ width: "40px", height: "40px" }} alt="" />
</Link>
</div>
<div id="texts" style={{ display: "inline", whiteSpace: "nowrap" }}>
<strong> 75 </strong>
</div>
</div>
CodeSandbox Demo
Before we can answer the question you ask in the title of this post, you have to fix your inline styles, hence the error you receive from React. The answer to your question using CSS will be at the bottom of the post.
When using inline styles in React, you will need to create an object. An object is the use of key, value pairs. So, using the code given in your example, style="display:inline;" is not an object, and thus will not work as you have seen. To make this inline style work, you will need to do one of the following.
Create an object within the JSX
This method can get messy, so if you are planning to write all your styles as inline styles, I suggest using method 2.
To do this, you can follow #RiTeSh 's example. You will need to create an object and pass that to the element's style prop, WHICH CANNOT BE A STRING, as you can see from the errors you are getting. You can do the following:
// Notice how the value is the only string in the object.
style={{
whiteSpace:'nowrap',
display:'inline',
}}
And to see what this would look like when used in an element:
<div style={{whiteSpace:'nowrap', display:'inline'}} >
Hello World
</div>
Store the styles in a variable
Compared to method 1, this is a much cleaner way to add inline styles as it doesn't create a jumbled mess in your render() function.
Before you reach the render() function, create an object and store it in a variable like the one below.
const styleObject = {
whiteSpace:'nowrap',
display:'inline',
};
return (
// Your JSX here
);
And when you apply the styleObject to the JSX element, it should look like the following:
return(
<div style={styleObject} >
Hello World
</div>
);
Make img and text appear on the same line
This is quite a simple answer if you use the display: flex property on the wrapper element, which, in your case, is the div with an id of container. Here is a simple read about flexbox from W3 Schools
With inline styles on the container element:
style={{display: 'flex'}}
With CSS:
#container {
display: flex;
}
I am using Next.js (React) with Bootstrap and styled JSX. I am running into an issue where a custom class in Bootstrap for a modal is only styled with css if the css if global. I declare the custom class using the dialogClassName property on the Modal. This is my function component (I am using Typescript):
const Form: React.FunctionComponent<props> = (props: props) => {
const [FormVisibility, FormDispatch] = useContext(FormContext);
return (
<Modal
show={props.isVisible}
onHide={() => {FormDispatch({ type: ActionTypes.CloseForm }) }}
backdrop="static"
dialogClassName="custom-modal"
>
<Modal.Header closeButton >
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={() => {FormDispatch({ type: ActionTypes.CloseForm }) }}>
Close
</Button>
</Modal.Footer>
<style jsx global>{`
.custom-modal {
color: blue;
height: 75vh;
width: 75vw;
max-width: none !important;
}
`}
</style>
</Modal>
);
}
This works just fine. But if I were to change <style jsx global> to <style jsx> then the styling isn't applied. Am I doing something wrong here or is there a better way to do this? It seems weird to me that global is needed even though the component has the class declared locally.
Thanks!
My experience working with Modals is that the modal element is actually extracted out of the DOM tree where your component lives and placed at the top most level right under the body tag.
<body>
// Component where the Modal is declared
<Form />
<div>
// Modal appears here
// Styles are not applied because Modal is not nested within Form component
</div>
</body>
It is possible that your local style is not applied because of this reason.
I'm trying to style a component in my React application, but I do not want to create an external stylesheet because it's a small project. How can I style this image component without using an external stylesheet?
return (
<div>
<Image>
<div>
<img src='./resources/image.png alt='image'>
</div>
</Image>
</div>
);
I've found resources online for using inline styling on a specific element, but I want to make my code clean by putting it at the top of the component like using a style tag at the top of an HTML file. I haven't been able to find anything that resembles this in React.
For inline styles you can define a style object, either at the top of the file, or in your render method, and then refer to it:
var myStyle = { margin: 10 }
return (
<div>
<Image>
<div>
<img style={myStyle} src='./resources/image.png alt='image'>
</div>
</Image>
</div>
)
More info in the docs: https://reactjs.org/docs/dom-elements.html#style
Internal CSS styling in JSX is very similar to how it's done in HTML. The only difference is that you need to declare the style names as variables because they are treated like JS objects. With this in mind, you also need to end each property with a comma instead of a semicolon, and the last property should have no punctuation at the end. Using this approach, you should also use style={} instead of className={}. You can read more about JSX styling here.
const myStyle = {
width: '300px',
height: '300px',
border: '2px solid black'
}
const Image = () => {
return (
<div>
<img style={myStyle} src='./resources/image.png alt='image'>
</div>
);
}
You can do something like this:
const Image = styled.div`
background: #1d9ac2;
img {
border: 1px solid red;
}
`;
There are several solutions for this, and a big debate about which one is "the best".
I don't know which one is the best, but I can tell you which one I use:
Styled components (https://www.styled-components.com/)
With this, you would define an object like this
let styled = require('styled-components');
// Or for fancy people
import styled from 'styled-components';
const Image = styled.div`
background-color: red;
/* You can even put classes or selectors in here that will match the sub-components */
.some_class_used_inside { color: black; }
img { width: 100px }
`
and use it like this
return (
<div>
<Image> {/* This will be the `<div>` with `background-color: red` */}
<div className="some_class_used_inside"> {/* This will now have `color: black` applied */
<img src='./resources/image.png alt='image'> {/* This will have `width: 100px` applied to it */}
</div>
</Image>
</div>
);
Ofcourse, there are many other libraries to do it, and everyone will have to find their own favorite I guess :)
I'm creating a component and I want to pass a style attribute via props to an internal div, but I get this error when trying to assign float:left
Unknown prop float on tag. Remove this prop from the element.
My component:
<Badge style={{width:'10em',float:'left'}}
color={props.user.color}
initials={props.user.initials}
name={props.user.name} />
the component code:
render() {
const {color,initials, name, style} = this.props;
return (
<div {...style}>
<div className="badge-wrapper">
<div style={{'backgroundColor': color}} className="badge">
{
initials.toUpperCase()
}
</div>
</div>
{name}
</div>
);
}
I don't see the issue with setting up a float left on a simple div, any recommendations?
Change
<div {...style}>
to
<div style={style}>
You are using JSX Spread attributes to apply your css properties to the div as attributes when all you really wanted to do was assign them to the style prop.