I'm using bulma css in my react application. And I have some additional css in my css module file to set image size.
Additionally I want to use css classes from bulma like my-2 mr-4 in my main wrapping div.
How do I add these classes to the main wrapping div ?
import React from "react";
import logoimg from "../../assets/images/logo.svg";
import classes from "./Logo.module.scss";
const logo = (props) => {
return (
<div className={classes.Logo}>
<a href="/">
<img src={logoimg} />
<p>Resume Builder</p>
</a>
</div>
);
};
export default logo;
.Logo a img {
width: 80px;
height: auto;
vertical-align: middle;
}
.Logo a {
text-align: center;
}
.Logo a p {
display: inline-block;
color: #434343;
font-weight: bold;
}
You can pass more classes into className using template literal strings. Here's an example passing in the my-2 and mr-4 you wanted to add:
import React from "react";
import logoimg from "../../assets/images/logo.svg";
import classes from "./Logo.module.scss";
const logo = (props) => {
return (
<div className={`${classes.Logo} my-2 mr-4`}>
<a href="/">
<img src={logoimg} />
<p>Resume Builder</p>
</a>
</div>
);
};
export default logo;
Use classnames npm mudule. classnames is conditionally joining classNames together.install this mudule with
npm install classnames --save
or
yarn add classnames
and use for example :
import React from "react";
import cs from "classnames";
import logoimg from "../../assets/images/logo.svg";
import classes from "./Logo.module.scss";
const logo = (props) => {
return (
<div className={cs(classes.Logo, 'my-2', 'mr-4' )}>
<a href="/">
<img src={logoimg} />
<p>Resume Builder</p>
</a>
</div>
);
};
export default logo;
also you can use this code without any module
className={`${classes.Logo} my-2 mr-4`}
All that classes.Logo does is return a string corresponding to the css class name for Logo which they have made unique(for scoping purposes), so you can just append it to a pre existing string, either by defining string in a variable or by doing it inline
Eg:
const logo = (props) => {
let logoClass = 'my-2 mr-4 ' + classes.Logo;
return (
<div className={logoClass}>
<a href="/">
<img src={logoimg} />
<p>Resume Builder</p>
</a>
</div>
);
};
Or doing it inline like <div className={'my-2 mr-4 ' + classes.Logo}>
P.S would recommend first approach because you can change the string conditionally. Oh, and make sure that the classes are space seperated in the string.
The way you have it implmented you need to install the Bulma npm package. Then in the .scss file you are importing in your React code (in your case the logo functional component file) you need to import whatever Bulma CSS you want to use from the node_modules folder for example your Logo.module.scss could contain something like this:
// Import only what you need from Bulma
#import "../../../node_modules/bulma/sass/utilities/_all.sass";
#import "../../../node_modules/bulma/sass/base/_all.sass";
#import "../../../node_modules/bulma/sass/elements/button.sass";
#import "../../../node_modules/bulma/sass/elements/container.sass";
#import "../../../node_modules/bulma/sass/elements/title.sass";
#import "../../../node_modules/bulma/sass/form/_all.sass";
#import "../../../node_modules/bulma/sass/components/navbar.sass";
#import "../../../node_modules/bulma/sass/layout/hero.sass";
#import "../../../node_modules/bulma/sass/layout/section.sass";
Finally include the class names you want to use by appending them to the logoClasses string and setting them as the value (delimited by a space) for the className attribute in your wrapping div:
const logo = (props) => {
let logoClass = 'my-2 mr-4 ' + classes.Logo;
return (
<div className={logoClass}>
<a href="/">
<img src={logoimg} />
<p>Resume Builder</p>
</a>
</div>
);
};
Related
I am trying to link my picture but it's not working
Any idea what I have forgotten?
Code:
import React, { Component } from 'react';
export default class Card extends Component {
render() {
return (
<div>
<img src="../img/img_avatar.png" alt="Card"></img>
</div>
);
}
}
[Structure][1]
Images are self-closing tags, so you would use it like:
<img src="../img/img_avatar.png" alt="Card" />
instead of what you're using.
Below is my code for Cards.js file, right now it's a card that you can click on and it links to the Services page with path ='/services' from within the same website, I would like to add a link to another website, how would I go about doing that? would I need to add an a href= link to Cards.js?
import React from 'react';
import CardItem from './CardItem';
import './Cards.css'
function Cards() {
return (
<div className='cards'>
<h1>Check out my Programming Portfolio Projects!</h1>
<div className='cards__container'>
<div className='cards__wrapper'>
<ul className="cards__items">
<CardItem
src={`${process.env.PUBLIC_URL}/images/ReactSocialPosts.jpg`}
text='hello testing 123'
label='This is a card'
path ='/services'
/>
</ul>
</div>
</div>
</div>
)
}
export default Cards;
Below is CardItem.js if needed
import React from 'react';
import { Link } from 'react-router-dom';
function CardItem(props) {
return (
<>
<li className='cards__item'>
<Link className='cards__item__link' to={props.path}>
<figure className='cards__item__pic-wrap' data-category={props.label}>
<img
src={props.src}
alt='Travel Image'
className="cards__item__img"
/>
</figure>
<div className='cards__item__info'>
<h5 className='cards__item__text'>{props.text}</h5>
</div>
</Link>
</li>
</>
);
}
export default CardItem;
I'm not sure, but I think that you would only have to create a second CardItem with its attribute path = complete link to external website.
Example :
<CardItem
src={`${process.env.PUBLIC_URL}/images/OtherImage.jpg`}
text='External website'
label='A label'
path ='https://externalwebsite.com'
/>
If you just want to simply link to another website then you can simply use an anchor tag, if you want to declare a Route from react-router-dom for that link to follow, you need to look at this post
As per documentation React-Router understands only internal paths. Then an anchor tag is needed. I would do a wrapper component for Link that chose if render an anchor or the router link object. Then use it instead of "Link".
Something like (code not tested):
const MyLink = ({path, children, ...props}) => {
const comp = path?.trim().substring(0,4) === "http" ? <a href={path}> : <Link to={path}>;
return <comp ...props>{children}</comp>
};
I'm trying to get different colors for different titles in different components with a React application.
I dispatched the css into two different css files but the h1 color which is applied is the same (the last value read) for both h1 titles.
// App.js
import React from "react";
import ComponentOne from "./ComponentOne.component";
import ComponentTwo from "./ComponentTwo.component";
import "./styles.css";
export default function App() {
return (
<div className="App">
<ComponentOne />
<ComponentTwo />
</div>
);
}
// ComponentOne.module.css
h1 {
color: red;
}
// ComponentTwo.module.css
h1 {
color: blue;
}
In each component I have the corresponding CSS import line:
import "./ComponentOne.module.css";
Can you help me figuring out what is going wrong with my code please ?
The "module" naming convention I used for the CSS files is adapted from this, while the whole code can be found here.
Thanks a lot.
The reason it only picks blue is because the browser does not care about what css is in what file, it will just read it all, and if there is already a style for a h1 and then it finds a different style for a h1 it will simply overwrite the previous style.
In your case the red color gets overwritten, and instead all the h1 become blue
This is why its very bad practice to just overwrite all instances of a specific element type. instead what you should do is wrap your code in a div/span with some id/class like this:
<div id="section1">
<h1>i am blue</h1>
</div>
<div id="section2">
<h1>i am red</h1>
</div>
and then instead of styling all the h1's everywhere on the page, you could style all the h1's that are contained in an element with some id. you can do that like this
#section1 > h1 {
color: blue;
}
#section2 > h1 {
color: red;
}
There is one issue in that when you use css module you need to import those classes and need to use it there. You can't use it on tag or elements. For that you need to use styled-component or any similar library.
IN your case you need to like this:
<div>
<h1 className={styles.heading}>Component One</h1>
</div>
where heading is your class name.
Full code:
ComponentOne.component.js
import React, { Component } from "react";
import styles from "./ComponentOne.module.css";
export default class ComponentOne extends Component {
render() {
return (
<div>
<h1 className={styles.heading}>Component One</h1>
</div>
);
}
}
ComponentOne.module.css
.heading {
color: red;
}
ComponentTwo.component.js
import React, { Component } from "react";
import styles from "./ComponentTwo.module.css";
export default class ComponentTwo extends Component {
render() {
return (
<div>
<h1 className={styles.heading}>Component Two</h1>
</div>
);
}
}
ComponentTwo.module.css
.heading {
color: red;
}
Code and demo can be found here: https://codesandbox.io/s/elated-dream-2ocmf?file=/src/ComponentOne.component.js
I believe that without an extra pre-processor JavaScript won't scope your CSS files to specific components. It will just include both files to the app CSS output. And because the second and last loaded module was setting the colour to blue, it overrides the first one.
You will need to identify both components by a class or an ID so you can apply the styles conditionally.
Use className instead. Since <componentTwo /> gets rendered least it's styling will dominate.
add in-line styling for example:
<div>
<h1 style={{color:"red"}}>Component Two</h1>
</div>
or you can also programatically change the styling
render() {
var color = "blue";
var foo = "bar"
if(foo == "bar"){
color="red"
}
return (
<div>
<h1 style={{color:color}}>Component Two</h1>
</div>
);
}
I am new to React and was learning how to use CSS modules in React but faced this error:
Failed to compile.
./src/components/Header/Header.js
Module not found: Can't resolve './Header.module.css' in 'C:\Users\User\Desktop\qwerty\qwerty-project\src\components\Header'
Here is the code I am using
import React from "react";
import styles from "./Header.module.css";
const header = props => {
return (
<div className="row">
<div className="col-md-4">
<i className="fab fa-github"></i>
</div>
<div className="col-md-8">
<nav>
<ul className={styles.nav}>
<li>{props.home}</li>
<li>{props.about}</li>
<li>{props.contact}</li>
</ul>
</nav>
</div>
</div>
);
};
export default header;
If you want to use the CSS file as a module you will need to use a webpack loader.
Alternatively you can just import "./Header.module.css"; and use the classnames to style your components
Good day! im trying to work with parallax(materializecss) in reactjs but the pictures does not come out.
i already install the materializecss using npm,
heres my code:
import React from 'react';
import 'materialize-css';
import 'materialize-css/dist/css/materialize.min.css';
import Pic1 from '../img/Pic1.jpg'
import Pic2 from '../img/Pic2.jpg';
import 'materialize-css/js/parallax';
const About = () => {
return (
<div className="paralax">
<div className="parallax-container">
<div className="parallax"><img src={Pic1} alt="Building"/></div>
</div>
<div className="class section white">
<div className="row container">
<h2 className="header">Parallax</h2>
<p className="grey-text text-darken-3 ligthen-3">
Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.
</p>
</div>
</div>
<div className="parallax-container">
<div className="parallax"><img src={Pic2} alt="Building"/></div>
</div>
</div>
)
}
export default About;
Use react-materialize.
Install: npm install react-materialize
And import Parallax like import {Parallax} from 'react-materialize';
Hence your code becomes:
import React, { Component } from 'react';
import './App.css';
import {Parallax} from 'react-materialize';
class App extends Component {
render() {
return (
<div>
<Parallax imageSrc="http://materializecss.com/images/parallax1.jpg"/>
<div className="section white">
<div className="row container">
<h2 className="header">Parallax</h2>
<p className="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
</div>
</div>
<Parallax imageSrc="http://materializecss.com/images/parallax2.jpg"/>
</div>
);
}
}
export default App;
I have used image hyperlinks. But you can replace them with static images also.
Also, import jquery befor materialise.min.js in your index.html
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
For Reference : https://react-materialize.github.io/#/
PEACE
To use Javascript components of Materialize CSS, we need to get the reference of that particular element that we're gonna use.
We're using ref because we're triggering imperative animations.
When to Use Refs
Triggering imperative animations.
Integrating with third-party DOM libraries.
As we're using MaterializeCSS which is a third-party CSS framework so in order to use the animations of that we're using ref.
When to use refs in React
CodeSandbox - Parallax Demo
You can check other Materialize CSS components in React from this repository - GermaVinsmoke - Reactize
import React, { Component } from "react";
import M from "materialize-css";
import "materialize-css/dist/css/materialize.min.css";
import Image1 from "../public/parallax2.jpg";
import Image2 from "../public/parallax1.jpg";
class Parallax extends Component {
componentDidMount() {
M.Parallax.init(this.Parallax1);
M.Parallax.init(this.Parallax2);
}
render() {
return (
<>
<div className="parallax-container">
<div
ref={Parallax => {
this.Parallax1 = Parallax;
}}
className="parallax"
>
<img src={Image2} />
</div>
</div>
<div className="section white">
<div className="row container">
<h2 className="header">Parallax</h2>
<p className="grey-text text-darken-3 lighten-3">
Parallax is an effect where the background content or image in
this case, is moved at a different speed than the foreground
content while scrolling.
</p>
</div>
</div>
<div
ref={Parallax => {
this.Parallax2 = Parallax;
}}
className="parallax-container"
>
<div className="parallax">
<img src={Image1} />
</div>
</div>
</>
);
}
}
export default Parallax;