Develop Reference

Change CSS style for external library's component in react

I am using an external library in react called "drag and drop files"
This library only allows adding children to the component and style them.
My problem is, the library's component style "the parent" has unnecessary style elements, and I'm only able to modify the children and change their style inside the parent element. However, I can't change the element's style itself.
My question is, is there a way to update the parent component style even though there's no direct access to it?

Inspect html elements with your browser.
And you can change the styles in your style.css using classes or elements or ids that you inspected.

sorry don't have enough rep for a comment but I would think that if you can get the name of the parent element and if you use styledcomponents (https://styled-components.com/)
you could just override the elements styling by creating a styledversion of it.
for example an Avatar from mui would be overridden by
const StyledAvatar = styled(Avatar)`
background-color: black;
color: white;
`;
You'd still need to import the element though.
a normal element (div for example) could be styled by doing the following:
const StyledDiv = styled.div`
background-color: black;
color: white;
`;
hope this kinda helps.
Edit: to use your own styled components, don't forget to export them :)

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.

React - Styled Component with multiple classes

I'm about to build a small project in react using styled component, however, I have a question for using this package. I would like to create a styled component that brings together several classes but I don't know how to do, for example :
<div class="search-input search-input-small">
How to turn it into a styled component ? In css there are two different classes, but in styled component i don't know.
Thank you.

There are a few ways to do this. For example, you could run with the base styling on a styled component and then "upgrade that with the additional styling.
const Div = styled.div`
/// styles for className -> search-input
}`
const SmallDiv = styled(Div)`
/// styles for className -> search-input-small
`
Also, if you know SASS you can structure your CSS with nesting using &. e.g.
const Div = styled.div`
.search-input {
//CSS
&-small {
//CSS
}
}
`

With styled-components, you can go with a similar format.
Here we are creating a styled component named Div, within the styled component I've declared classes .search-input and .search-input.search-input-small to style the div from your example.
The Div is being treated as a parent container.
const Div = styled.div`
display: flex;
background-color: black;
.search-input {
background-color: blue;
}
.search-input.search-input-small {
color: white;
}
`;
We call the newly created styled component like this:
export default function App() {
return (
<Div>
<div className="search-input search-input-small">Hello</div>
</Div>
);
}
As you can see the <div class="search-input search-input-small"> from your example is a child to the parent Div. The parent Div does not require styles but I have included them for this example.
Also here is a codesandbox with a working example.

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>