I appreciate your time and help. I spent hours trying to figure this out can't seem to get to the bottom of it.
I have this react component:
import styles from './style.scss';
class ButtonComponent extends React.Component {
render() {
return (
<div className={styles.bunny}>
hello world
</div>
);
}
}
and scss file:
.bunny {
display: block;
margin-top:50px;
margin-bottom:55px;
background-color: blue;
}
When I load up my html, the div has no classname when I expect it to be <div class="bunny">
When I put the class name in the react component literally like this:
<div className="bunny">
then I can see the className in the browser.
What am I doing wrong?
Thank you so much in advance.
Firstly, you need to guarantee it's defined with: console.log(styles)
Im' not sure you import style.scss correctly.
You need to import your scss like...
import './styles.scss';
Webpack will take care of bundling your styles so you can add the className as a string on your component.
<div className="bunny">Hello World</div>
What fixed this for me was to change the name of my scss file from style.scss to style.module.scss
For me it's because I use commonjs's require to load an es module.
Related
I have a Laravel project where we are using React for new components but about half of the existing pages are older and just use the regular blade files.
In the public folder we have a few css files that are included in app.blade.php which serves as out top file.
Now, it works perfectly until we try to import React Component. As soon as i do this, it recompiles the css in some weird way that it just breaks. All previously used css just seems to stop working.
This is my mix file:
const mix = require('laravel-mix')
mix.js('resources/js/app.js', 'public/js')
.react()
.sass('resources/sass/app.scss', 'public/css')
An example React Component i'm testing (comes from the laravel + react babel preset, i just added the css import):
import React from 'react';
import ReactDOM from 'react-dom';
import './Example.css'
function Example() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card">
<div className="txt-color-white card-header">Example Component</div>
<div className="txt-color-white">ISTO É UM TESTE</div>
<div className="txt-color-white card-body">I'm an example component!</div>
</div>
</div>
</div>
</div>
);
}
And this is my public folder. I'm assuming react css is being thrown into the app.css file but instead of being added (appended) is doing something weird.
I have installed lit as well as fontawesome as npm packages.
I also use the Vaadin Router package for some routing.
Now I want to insert some icons on my own elements.
While the icons are replaced correctely in the index html they are not in all the seperate elements.
For replacing the icons I use the dom.i2svg method of the js-api from fontawesome. If I understood correctly this should also be used and activated automatically by using the npm package of frontawesome.
The files of interest are the following:
index.html
<body>
<navigation-element></navigation-element>
<i class="fab fa-linkedin"></i>
<main>
<div id="outlet"></div>
</main>
<footer-element></footer-element>
<script src="./vendor/webcomponents-loader.js"></script>
</body>
index.js
import { dom, library } from '#fortawesome/fontawesome-svg-core'
import { fas } from '#fortawesome/free-solid-svg-icons'
import { fab } from '#fortawesome/free-brands-svg-icons'
const outlet = document.getElementById('outlet');
const router = new Router(outlet);
router.setRoutes([
{ path: '/', component: 'my-element' },
]);
library.add(fas, fab);
dom.i2svg();
my-element.js
import { dom } from '#fortawesome/fontawesome-svg-core';
class MyElement extends LitElement {
static styles = css `
:host {
display: block;
}
`;
connectedCallback() {
super.connectedCallback();
dom.i2svg(); // does not work in here
}
render() {
return html `
<i class="fas fa-kiwi-bird"></i>
<i class="fab fa-linkedin"></i>
<div>
<p> text </p>
<p> text </p>
</div>
`;
}
}
customElements.define('my-element', MyElement);
In the index.js I added my icons to the library and in the index.html the the i element is correctly replaced. But for the my-element nothing happens. The library is filled with the icons but no elements are replaced. I tried to call the dom.i2svg() and/or dom.watch(params) inside the connecedCallback function aswell as in the constructor.
I also tried various other things/functions like importing css.
Someone else had a similar issue which could be solved on github, but this solution does not work for me.
Has someone an idea why? What did I wrong, is it maybe the router or is the api just broken?
Your component extends from LitElement which means it has a shadow DOM that shields its internal HTML from external CSS. You can:
Extend from View instead of LitElement to avoid using shadow DOM (if your project is based on Vaadin's Hilla starter)
Override createRenderRoot() { return this; } in your LitElement to not use shadow DOM. This will disable shadow DOM for whole component.
Include fontawesome styles in your component template with <style>
Use slot for content intended to be in light DOM. This is better approach when you want to partially protect the implementation, e.g. your component is a layout with dynamic content.
I am trying to implement a project like:
https://codepen.io/andytran/pen/GpyKLM
As you can see there is javascript that is needed for the page to function. I am trying to build a Next/React component that implements this code:
import React, { Component } from 'react';
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
class Auth extends Component {
render() {
return (
<div className="App">
<Header></Header>
<div className="container mrgnbtm">
<div className="row">
<div>
hello
</div>
</div>
</div>
</div>
);
}
}
export default Auth;
Where would I put the javascript in the above example? Also, how would I call code from a scss file?
What you do is anti-pattern, instead of importing bootstrap from a CDN you can use reactstrap package.
for element listeners, must pass those to each element that you want, like onClick:
<div id="button" onClick={() => alert("button clicked!")} ....
and for using SCSS in your next app, first you have to install the sass package:
npm install sass --save
then reload the dev server and import SCSS file in component, e.g:
import styles from '../../styles/Home.module.scss'
I am trying to have the header of each of my app's pages change color based on the current page. How I am trying to achieve this:
<Header className="headerBitcoin"></Header>
What I want is the be able to have the header component present on all 4 pages, and then just change the className to another prop to change the background but not anything else.
And the header component itself
import styles from "../../styles/Home.module.css";
export default function Header(props) {
return (
<div >
<div className={props.className}>aaaaa</div>
<div className={styles.row}>
<div className={styles.tab}>a</div>
<div className={styles.tab}>a</div>
<div className={styles.tab}>a</div>
<div className={styles.tab}>a</div>
</div>{" "}
</div>
);
}
At the moment the styles for the tabs and row are working but the header is not getting its style applied.
I checked the console and found the header is getting the className headerBitcoin passed to it, however the row beneath it has the className of "Home_row__88lPM"
This is my first time working with next.js, and I know I am doing something wrong because this works in React. Any help would be appreciated.
don't do this:
<div className={props.className}>aaaaa</div>
try this instead:
<div className={styles[props.className]}>aaaaa</div>
I think this should works
I assume it's not being applied because you have the headerBitcoin styles defined in your CSS module.
If you want to apply a class that way (className="headerBitcoin"), you need to define the class in your global CSS instead.
If you meant to use the headerBitcoin defined in Home.module.css, then you'll want to change the className to use the scoped styles.
import styles from "../../styles/Home.module.css";
export default function Header(props) {
return (
<div >
<div className={styles[props.className]}>aaaaa</div>
// ...
</div>
);
}
I am new to React and having some trouble here- I am trying to use Sass to style a component in React. For some reason it isn't working. I am getting an error that 'styles' is defined but never used I'm not sure why this is happening as my other components are working fine. Probably something to do with the function around the jsx? I am getting an error 'styles' is defined but never used Any help is greatly appreciated!
Covers.js
import React from 'react';
import { videos } from '../../data/videos.json';
import styles from './covers.module.sass';
export const Covers = () => (
<div className="cover-container">
{videos.map((data, key) => {
return (
<Cover
key={key}
cover={data.cover}
title={data.title}
subtitle={data.subtitle}
description={data.description}
/>
);
})}
</div>
);
const Cover = ({title, subtitle, description, cover}) => {
return (
<div>
<img src={cover} className="cover-image" />
<h1 className="cover-title">{title}</h1>
<h2 className="cover-subtitle">{subtitle}</h2>
<p className="cover-description">{description}</p>
</div>
);
};
export default Covers;
covers.module.sass
.cover-container
text-align: center
color: white
.cover-image
width: 200px
height: 200px
object-fit: cover
.cover-title
font-size: 7em
.cover-subtitle
font-size: 4em
.cover-description
font-size: 2em
you are using CSS Modules but not using properly. CSS Modules allows you to scope locally your css, given an unique identifier to the classes for given scope. This avoids name collisions, a problem that can occur given the global scope nature in CSS.
but for that work properly at your file after importing the style as you do:
import styles from './covers.module.sass';
you need to use that styles object imported at your className declaration, rather than passing a string name like you do. Since you are not applying styles anywhere you get this error warning. You should pass to className style with the corresponding desired class.
therefore, the correct way to apply styles would be:
<div>
<img src={cover} className={styles.cover-image} />
<h1 className={styles.cover-title}>{title}</h1>
<h2 className={styles.cover-subtitle}>{subtitle}</h2>
<p className={styles.cover-description}>{description}</p>
</div>
as you do that your error is fixed, your styles work as expected, and at the browser you'll have unique classes generated which ensures that will not face any class name collision.
You can not use className like this <img src={cover} className="cover-image" />
correct would be <img src={cover} className={styles.cover-image} />
or
you can import sass file like this import './covers.module.sass'; and use className like this <img src={cover} className="cover-image" />
ref: https://www.w3schools.com/react/react_sass.asp
just replace the
import styles from './covers.module.sass';
with
import './covers.module.sass';