ReactJS and classNames - javascript

I'm very new to ReactJS and currently using the MERN stack to create a new application.
I know, that I can use external stylesheets, by importing them:
import styles from ./Header.css
Usage:
<div className={styles["logo-home"]}>
test
</div>
.css file:
.logo-home {
background-color: #eee;
}
This is working fine, but I just can't find out, how to access something like:
.logo-home .inner {
background-color: #000;
}
I thought, this would work, when I write something like styles["logo-home"].inner or styles.inner, but it did not...
Whats the right / best way to solve this problem?

If you're cloning the MERN starter repo, you probably are using CSS modules (through webpack's setup).
The idea here is that you have your styles in a modular way with their own scope. This is achieved by adding some hashing to each classname. Like in this example:
So assuming you have
<div className={styles["logo-home"]}>
<div className={styles["inner"]}>
bla bla bla
</div>
</div>
Your imported .css file can look like this:
.logo-home { /* ... */ }
.inner { /* ... */ }
As you see, there is no need for CSS selectors as you would use in traditional CSS. You just map each container with one class name and CSSModules will make sure your class names don't collide among all your modules.
You can read more about CSSModules here

Related

how to write hover in same class in css file for react js

This is a reactjs project, Te amperzand syntax is working fine in Javascript file but not in css.
How to write hover class in css file?
If you want to write in same class. You should use Sass/Scss.
Save the css file with .scss extension. It is a precprocessor for better syntax.
Refer this sandbox:
https://stackblitz.com/edit/react-uwktzj?file=src%2FApp.js
You must write it this way
.baseStyle {
/* base styles goes here*/
}
.baseStyle:hover {
/* hover styles goes here */
}
If you wish to attain what you intend you must use scss.
Then it will be like
.class {
margin:20px;
&:hover {
color:yellow;
}
}
Reference
Using Scss in React

How to style css of ionic2-calendar?

I'm working on an app with Ionic 5.0.0, Angular 8 and using the ionic2-calendar plugin. Although the plugin demo works fine, I can't seem to modify the styling of the calendar.
The documentation lists a couple of classes that seem to be used for each element, but adding them to my own scss file and adding !important (or not) doesn't really work. I tried adding them to the global scss, as well as to the main app one.
Aside from that, I've tried using the browser inspector to check which css selector is actually styling the elements in question, but the attribute selector seems to be random somehow. Current day for example is:
.monthview-current[_ngcontent-ljn-c3]
And after reloading, it is
.monthview-current[_ngcontent-igq-c4]
So clearly that method won't work either... I've also tried adding td.monthview-current, which also didn't work... Those were the suggestions and sample codes I've found from looking up this plugin online and looking around the plugin files. If anyone has any ideas whatsoever I'd be super thankful.
EDIT: I've found a way to change it, but ONLY through the source files for the plugin, which I have to assume is not the right way to do it... There's JSON files, JS files, and I have to manually change all of them.
If the styles are present inside the angular component's file it will not be applied due to view encapsulation. You need to specify the styles in the global stylesheet, and also in most you need to add important to the styles.
To elaborate further,
-src
-assets
-calendar.css (add styles here)
-app
-my-calendar
-my-calendar.page.html
-my-calendar.page.ts
-my-calendar.page.css (and not here)
Some commonly needed customizations: (assets/calendar.css)
Apply styles to the selected date:
.monthview-selected{
font-weight: bold;
background-color: #F1F1F1 !important;
color: #333 !important;
}
Apply styles to the date that has an event:
.monthview-primary-with-event, .calendar-event-inner{
background-color: #1a92d0!important;
}
Disable all the borders in the calendar:
td, th {
border: 0 !important;
}
Final calendar after applying the styles:
HTML
<calendar [eventSource]="eventSource" [calendarMode]="calendar.mode" [currentDate]="calendar.currentDate"
(onCurrentDateChanged)="onCurrentDateChanged($event)" (onRangeChanged)="reloadSource(startTime, endTime)"
(onEventSelected)="onEventSelected($event)" (onTitleChanged)="onViewTitleChanged($event)"
(onTimeSelected)="onTimeSelected($event)" step="30" (showEventDetail)="true" formatDayHeader="EEEEE"
allDayLabel="All Day" startHour="9" endHour="20">
</calendar>
I had the same issue and a solution is related to encapsulation as stated in other answer.
Styling not applying to child component
try update your component:
#Component({
...
encapsulation: ViewEncapsulation.None // <------
})
export class xxComponent{
You can then apply the style based on the child class, eg.
.scss:
.monthview-container {
...;
}
The best way is to use Template Customization given in the plugin.
https://github.com/twinssbc/Ionic2-Calendar/blob/v6/README.md#Template Customization
If that is diffcult in your case. Then add a class to calender tag in html. And get all the child elements in css using Child or descendent combinator. Css Combinator
Although I'm not sure about the reason for this, the solution in my case seems to be using the global stylesheet (without any attribute selector in brackets) instead of the module specific one. It's not ideal, but it works I guess!
With depp
::ng-deep {
.monthview-selected {
background-color: blue !important;
color: white !important;
border-radius: 50%;
}
}

Custom Bootstrap SCSS with React Components

I am building a react-app, created with create-react-app, using bootstrap and react-bootstrap
I have a custom theme that is an npm package, and really just defines some variables.
#myorg/theme/lib/scss/_variables.scss:
$theme-colors: (
primary: #FFFF,
// etc...
)
Then I import this in my "site" theme before importing bootstrap:
./src/index.scss:
#import "~#myorg/theme/lib/scss/_variables.scss";
#import '~bootstrap/scss/bootstrap.scss';
Now I'd like to have components with their own specific styles, that build on bootstrap:
./src/components/MainLayout.scss:
#import "~bootstrap/scss/_functions";
#import "~bootstrap/scss/_variables";
#sidebar {
border-right: 1px solid $gray-400
}
However when I do this, it gets rid of my theme colors, so I have to do this -
./src/components/MainLayout.scss:
#import "../../index.scss";
#sidebar {
border-right: 1px solid $gray-400
}
Is this the correct way to do this? It seems to write the entire contents to the document (bootstrap and all) every time I do this, and I would be doing it a lot for many components. For instance, I have another component where I'd like to customize CardColumns (I actually can't get this to work no matter the import):
//#import ???? I need, functions, mixins, and variables from bootstrap
.card-columns {
#include media-breakpoint-only(lg) {
column-count: 10;
}
#include media-breakpoint-only(xl) {
column-count: 10;
}
}
What is the correct way to use bootstrap 4's scss files in modular react components? Without bloating the download size.
I would create 1 lib.scss file to contain all my import from library
like this name lib.scss
#import "~bootstrap/scss/bootstrap";
#import "~font-awesome/scss/font-awesome";
then when I create new module like admin module i will simply import like this
#import "./lib";
...

ReactJS styles 'leaking' to other components

So I have two components... a Navbar component, and an AboutPage component.
They are both in the same directory, 'App'
App
-- Navbar --> Navbar.css, Navbar.js
-- AboutPage --> Aboutpage.css, Aboutpage.js
So as you can see, they have two separate stylesheets.
In the JS pages the correct CSS file is being imported as well.
When I do a style like this for example:
Navbar Component
p { background: red }
^^ this style also applies to the p's in the Aboutpage. I even tried to give the P in Aboutpage its on id and style it that way and it still failed.
That's the expected behaviour.
No matter which file you specify a rule like p { background: red }, it's going to be applied to all DOM.
Specifying and id attribute to won't work either. The above rule is general enough to apply to all <p>s.
If you want to specify css files for each component, you should also create component specific css classes. Like the following example.
import React from 'react';
import './DottedBox.css';
const DottedBox = () => (
<div className="DottedBox">
<p className="DottedBox_content">Get started with CSS styling</p>
</div>
);
export default DottedBox;
and its css file:
.DottedBox {
margin: 40px;
border: 5px dotted pink;
}
.DottedBox_content {
font-size: 15px;
text-align: center;
}
If you want different ways of defining css for React, this resource adds 3 more ways of doing so, in addition to the above way.
You can also use css modules. They scope your CSS locally and are awesome
Scoping styles to a component requires WebComponents which relies on several newer browser features, particularly shadowRoot "shadownDOM" which supports this separation directly. These are most easily used with lit-element and/or Polymer 3.
Sometimes we need a global CSS which could affect another component even if we use module import, I didn't find anything to answer that in the official documentation, so my workaround is to use something like the following code in the component itself, and, it works fine :)
<style>
{
`
#page {
padding:0;
margin-top:0;
margin-bottom: 0;
margin-left: 0;
margin-right:0;
}
#media print {
#page {
size: 80mm 21cm;
}
}
`
}
</style>

How do you separately style two jQuery widgets that both require jquery-ui.css?

I have a page that I've designed which uses two commercial widgets both of which require the jquery-ui.css. When both widgets are on the page, one shows the .ui-slider .ui-slider-range correctly while the other one is absent. One widget uses the jquery-ui without modification while the other widget makes specific changes to the styling of .ui-slider .ui-slider-range. I assume I need to make one a separate class/id/element. How do I do that when it is based on a specific library/template? I tried using !important but that just created other issues.
You are on the right track, you can use the console to try your styles.
What im guessing is that you made changes in a class used by other widgets like .ui-widget, try to not mess with classes like .left, .container, or anything that looks like a generic name.
What you can do to specify the element you want to change is add a container with a different class, and then use it to access the widget classes:
<div class="myFirstContainer">
// Here comes widget 1
</div>
<div class="mySecondContainer">
// Here comes widget 2
</div>
Styles:
.myFirstContainer .ui-slider{
background: red !important;
}
.mySecondContainer .ui-slider{
background: blue !important;
}

Categories

Resources