This question already has answers here:
Next Image not taking class properties
(4 answers)
Closed 1 year ago.
I use the Next.js <Image /> component to load the logo in my header. I want to position the component within the header. In short, I need to specify its margin.
<div className={styles.header}>
<Image src={logo} alt="logo" />
<nav>navbar</nav>
<ul>
<li>opt1</li>
<li>opt2</li>
<li>opt3</li>
</ul>
</div>
I know that I can simply place the <Image /> inside a positioned block, but is there a way to do it directly?
No there is not. You can modify many properties by passing className prop to next/image. But since margin is relative to the wrapper, modifying it won't help you.
What you are trying to do requires setting styles on the wrapper inserted over img tag by next/image, which currently is not possible (directly). See this discussion for better insight.
However, as a workaround (for your particular case) you can add the styles on your header that select the wrapper div. Refer: CSS Combinators
.header > div {
margin-left: 2em;
}
Update: In newer versions you can use the experimental image component that renders img without any wrapper.
I think using styled-components is a pretty way.
import Image from 'next/image';
import styled from 'styled-components';
const StyledImage = styled(Image)`
/* your custom style */
margin: 10px;
`;
and using it: <StyledImage src={image_path} />
As nextjs documentation on Image component says you can use className for styling the same way as you do with your usual elements.
You can apply class name to the <Image/> component. E.g.
<Image
className="dummy-name"
src={src}
width={2400}
height={1598}
layout="responsive"/>
Documentation has listed some useful properties.
Related
I have a DropDownButton
<DropDownButton text="i" items={items} />
that has padding around it
How would one remove that padding for just this one button not all of them on the site ?
See for more context
https://codesandbox.io/s/unruffled-snow-cx50hi
You can also pass buttonClass prop to that particular DropDownButton, I have also shown it here.
https://codesandbox.io/s/crazy-forest-1lvs7f?file=/app/main.tsx
Please check the props that are being passed to DropDownButton for a better understanding.
Add below css in a new file called style.css
button {
padding: 0 !important;
}
and import it in main.tsx as
import ./style.css
I am using Next.js and next/image to display images, but the CSS is not working inside it. The image is in SVG format and I have placed it in the public folder. I am using Tailwind CSS along with this.
<Image
className="mt-3"
data-testid="close-icon"
src="/CloseIcon.svg"
alt="Close Nav Bar"
height="24"
width="24"
/>
I am not sure why it is not working and it is not being reflected in the browser. Any help will be greatly appreciated!
Before Next.js 12.2
Styling the next/image component's margins this way doesn't work in older Next.js versions. See relevant GitHub discussion for more details.
Internally to the next/image component, the <img> element and the elements that wrap it have inline styles that override certain values passed through className.
As a workaround, you can add a wrapper element and apply the margin styling to it instead.
<div className="mt-3">
<Image
data-testid="close-icon"
src="/CloseIcon.svg"
alt="Close Nav Bar"
height="24"
width="24"
/>
</div>
From Next.js 12.2
You can use the next/future/image component instead. This new component renders a single <img> element without any additional wrappers by default, and is no longer constrained by the wrapper's styles override.
You can enable next/future/image in next.config.js.
module.exports = {
experimental: {
images: {
allowFutureImage: true
}
}
}
From Next.js 13
The next/future/image component has been converted to next/image. Like next/future/image, this component renders a single <img> element and can be styled directly with className/styles.
Juliomalves's answer is right, but I would prefer:
<div className="mt-3" height="24" width="24">
<Image
data-testid="close-icon"
src="/CloseIcon.svg"
alt="Close Nav Bar"
layout="fill"
/>
</div>
You also can use a little cheat:
import {motion} from "framer-motion";
<motion.img
className="mt-3"
data-testid="close-icon"
src="/CloseIcon.svg"
alt="Close Nav Bar"
height="24"
width="24">
Try this:
<div style='width:104px;height:104px;position:relative;'>
<Image
alt='Mountains'
src='/mountains.jpg'
layout='fill'
objectFit='contain'
/>
</div>
More on objectFit Here
Wrapping the image component in a div helps solve the issue for me. I can apply the class name to the div and everything works as it should.
I think I have found an error with React-Materialize. Still new, probably won't stop people from being harsh ;).
Using the normal means of changing the text color i.e.
`className="black-text"`
does not work. I was forced to change it manually by finding the element
`nav .brand-logo {
color: black;
}`
and making the change within my own css file. I wanted to stay within the framework, but could not get anything to work. Here is my complete React-Materialize element:
`<Navbar brand="ARWA" className="transparent black-text" right>
<NavItem href="get-started.html">
<div className="blue-text">Getting started </div>
</NavItem>
<NavItem href="components.html">
<div className="blue-text"> Components</div>
</NavItem>
</Navbar>`
I took a look at the source code, but to no avail. No gleaming errors stood out to me. This may be an opportunity for someone better than I to make a contribution. Or at least see what I'm doing wrong and help me change the brand color within the React-Materialize framework.
Changing Text Color of React Attribute
If you want to edit the color of text within an attribute tag or add an image into the tag, you can put your code into a JSX variable and pass that variable into the attribute tag in react-materialize.
Changing Text Color
import YourStuff
import reactThings
const brandColor = <span style={{color: "#FFFFFF"}}>Your Brand</span>;
class Header extends Component {
...
<Navbar className="Header red" brand={brandColor} right />
}
brandColor changes whatever the default color was to #FFFFFF which is white. Make sure brandColor is outside of the component class.
Inserting Image
import Logo as "./logo.png";
const Img = <img src={Logo} alt={"YourBrand"}/>;
class Header extends Component {
...
<Navbar className="Header red" brand={Img} right />
}
The syntax for inserting an image is slightly different so I thought I'd include this in here along with your answer.
According to this you may need to wrap what you want to change in a div and change the class on that. Does that work?
i want custom style like margin-left, height, widht in react-loading.
i'm only can custom color, but custom margin doesn't work.
<Loading type ='spinningBubbles' color='#0088CF' />
Best wishes! Wish for replying.
You add custom styles using the style prop on DOM element components.
<div style={{ margin: '100px' }}>
<Loading type ='spinningBubbles' color='#0088CF' />
</div>
if you have access to change the loading component you could pass the style (or just the margin value) through to the underlying DOM elements as a prop.
If you have a lot of custom styling to do, there is a great library called Radium for making it easier.
In Material UI, I want to set borderRadius on my buttons. Passing the style attribute seem to work for FlatButton but not for RaisedButton.
For RaisedButton, the borderRadius is applied to the parent <div> (which is necessary) but not to <button> itself (which is also necessary)
Is this a bug in Material UI? Or is this behaviour intended? If it's intended, then how do I make a RaisedButton with rounded corners?
import React from 'react';
import RaisedButton from 'material-ui/lib/raised-button';
import FlatButton from 'material-ui/lib/flat-button';
export default class MyButtons extends React.Component {
render() {
return (
<div>
<FlatButton label="flat button" style={{borderRadius: '25px'}}/> {/*works*/}
<RaisedButton label="raised button" style={{borderRadius: '25px'}} /> {/*does not work*/}
</div>
);
};
}
This is the intended behaviour, and says so in the docs. For the record, you would never want a style prop to be passed to multiple children as no styles would make sense across all children - and how deep in nesting would you apply them?
But I think you're mixing concerns here. Using style on a component should only ever effect the root element - and that's assuming the developer chose to pass along the style tag, which they did.
But what you're looking to do is not style the component, but style the elements of the component. What you want to do is use a CSS class:
<RaisedButton label="raised button" className="raised-button--rounded" />
.raised-button--rounded,
.raised-button--rounded button {
border-radius: 25px; /* assuming one is not already defined */
}
NB: The developers do not intend for you to change the component styles that they have not specifically exposed. Through this approach, you will run into issues eventually.