Develop Reference

One of the styles doesn't work but the other do

I am making a web page to play a game. It uses two containers (inside a component). They show 2 images but by default they are empty. I apply one style to them: img-container which set the dimentions and color the background (it must be black), but the style doesn't work, although all other styles do.
Clarifications: At start, the div uses 2 classes (img-container and flex-child, which works fine). Also, I am working with Visual Studio Code.
I already try: change class name, reboot the host (closing VS Code an using 'npm start'), using another web browser (chrome and firefox) and change property values for bigger ones. This doesn't work but insert the properties in preexisting CSS classes and call they do.
Component code:
import React, { Component } from 'react';
//Class component
class PPT extends Component {
render() {
return (
<div id = "PPT">
<h3 id="explanation">¿Cómo se juega? </h3>
<div id="container" className="flex-parent">
<div id="player_hand" className="flex-child">
<h2>Jugador</h2>
<div className="img-container"></div>
</div>
<div id="computer_hand" className="flex-child">
<h2>Computadora</h2>
<div className="img-container"></div>
</div>
</div>
</div>
)
}
}
export default PPT;
CSS style:
#PPT {
margin-top: 90px;
margin-bottom: 15px;
}
#img-container {
background-color: #262626;
width: 474px;
height: 266px;
}

You are using #img-container while you must use .img-container because it's a class. I also suggest that you remove that hyphen(-) and use an _ instead to maintain proper naming convention of classes in react and to also respect lint rule as your approach will show a warning in some editors. At the end your class name must look like img_container in jsx and like this .img_conatiner in css.

The wrong part is this section in your JSX:
className="img-container"
since you are using className you have to provide a class in your related css file for it, like below:
.img-container {
background-color: #262626;
width: 474px;
height: 266px;
}
You are selecting your element in a wrong way!

In CSS, # is an ID selector, while . is a class selector. So, to target an element with class name img-container, you should use .image-container, and not #img-container.

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%;
}
}

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 to customize Ant.design styles

Who knows how to customize Ant.design styles in proper way?
For example, I want to change the default backgroundColor and height of Header section:
import React, { Component } from 'react';
import { Form, Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;
export default class Login extends Component {
render () {
return (
<div>
<Layout>
<Header style={{backgroundColor: '#555555', height: '5vh'}}>header</Header>
<Layout>
<Content>main content</Content>
</Layout>
<Footer>footer</Footer>
</Layout>
</div>
)
}
}
Is it ok, or there is a better way to customize styles?
Because I have not found some component's attributes or smth. like this.

Antd has externized most of their styling variable in LESS variables
as you can see in
https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
To be able to overwrite those variables you need to use modifyVar function from LESS
you can find more about theming here
So to your specific question, #layout-header-background does the job

This is how i customized the default antd styles in a particular component
In scss or less
.booking_information_table {
:global {
.ant-table-thead > tr > th,
.ant-table-tbody > tr > td {
padding: 0 0 !important;
background-color: unset;
border: none;
overflow-wrap: break-word;
}
}
}
In js file
after the import statement
import styles from './component.module.less'
In return
<Table
dataSource={bookingInformationDataSource}
columns={bookingInformationColumns}
pagination={false}
className={styles.booking_information_table}
/>

My personal approach (I'm working with dva-cli though):
Every time I need to override the CSS, I use a CSS file located in the same folder and import it such as:
your-component.js:
import styles from './your-stylesheet.css';
...
< AntdComponent className= {styles.thestyle} />
your-stylesheet.css:
.thestyle {
background-color: '#555555';
}

In the less file(like a CSS) you can handle customize styles. For
example in your case
.ant-layout-header{
height: 100vh;
background-color:#f50;
}
If you use Ant card
.ant-card-head{color:#j14}
I hope you can understand now

The above mentioned approaches work for simple components like Header but don't always work for complex components like Menu, Tabs, Collapse, Select, and others, due to styles nesting priority. At work we use the approach described by jayanes but we go deeper into nested Ant Design classes. Let me explain it in the following example: when you import Tabs from "antd", you have only 2 tags to override styles for: Tabs and TabPane.
<div className={styles.tabsContainer}>
<Tabs className={styles.tabs}>
<TabPane className={styles.tabPane}>
Tab 1 Title
</TabPane>
</Tabs>
</div>
But this antd component has a very complex structure. You can verify in dev tools: it has .ant-tabs-bar, .ant-tabs-nav-container, .ant-tabs-tab-prev, .ant-tabs-tab-next, .ant-tabs-nav-wrap, .ant-tabs-nav-scroll, .ant-tabs-tab-active, .ant-tabs-ink-bar and others.
The way to go is: in your less file nest the .ant-... classes inside your own parent component's className (in order to avoid overriding all the antd classes in the whole app after code compilation). Write there your own css properties, for example:
.tabsContainer {
.ant-tabs-tab-active {
background: #fff266;
color: #31365c;
&:hover {
color: darken(#31365c, 5%);
}
}
.ant-tabs-ink-bar {
background: #fff266;
}
}
If you still need more detailed explanation, please refer to the video I posted on YouTube on how to customize Ant Design components - tabs.

Override the component style
Because of the special needs of the project, we often meet the need to cover the component style, here is a simple example.
Override the component style

Customizing Antd theme Colors can be a hassle thus, I created a package that allows you to change them easily with post CSS you can even change them to CSS variables and change them in runtime.
For more info https://www.npmjs.com/package/ant-post-css-theme

Override bootstrap css conditional from javascript

I have to do internationalization in my app with some right to left (arabic/hebrew) languages. So i'd like to be able to override some bootstrap classes (like col) to be float right instead of left.
I use create-react-app (babel/webpack) , react-bootstrap.
You can't import conditionally so I did a conditional require
if (language.isLanguageLTR()) {
console.log("REQUIRE RTL CSS");
require("./rtl.css");
}
It works well when I'm in development mode, but when I build my application using create-react-app, the css file is imported even if the condition is set to false.
Is there a way (sure there is !) to override some css classes without inline css/specific classes everywhere I use bootstrap column ?
I think webpack loads it on deployment mode but I don't get why, and maybe there is a more proper way to conditionally override css.
My css just in case you'd like to understand better
.App {
direction: rtl;
}
.col-sm-1 {
float: right;
}
.col-sm-2 {
float: right;
}
...

I got it. When doing a conditional import/require, webpack will always insert the file (just in case it may be called). Of course when it was a css file, it overided everything.
What I did was defining css using pure javascript (like this answer : https://stackoverflow.com/a/15494200) and it works like a charm (on chrome/ie/FF at least). I don't find it pretty, I would like to have it in a .css file, but it's already something.
var style = document.createElement("style");
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);
style.sheet.insertRule(".App { direction:rtl; }", 0);
style.sheet.insertRule(
".col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {float: right;}",
1
);`

I think the easiest way to achieve what you want is to have a float: right class that you can use jQuery to add that class when required. something like:
// CSS
.rtl {
float: right !important;
}
// Javascript
var ltr = true;
function ltr ( ltr ) {
$( '.col-sm-1, col-sm-2' ).addClass( 'rtl' );
}