How I can override specific css styles from react big calendar - css

I use a react big calendar in sharePoint web part. So this styles from external css of big calendar hide my month calendar:
.rbc-month-row {
display: flex;
overflow: hidden;
}
and I get the following picture:
so when I disable this styles from chrome it's okay:
I try to disable this styles from my own css but it's doesn't work:
.rbc-month-row {
overflow: visible !important;
display: block !important;
}
So how I can disable this styles by other ways?


the solution is to change flex-basis property to auto like this:
flex-basis: auto;


Here you need to make sure that your css is included after the react big calendar css file like as below.
example :
1. react big calendar.css
2. <custom.css>.
If this is way then it will worked and make sure that other style may not affecting this classes.

Related

Angular mat-error not taking up its own space

I have a form with mat-errors that I'm trying to space out. I know I can simply space out the form fields themselves, but I've been trying to add margin/padding/border to mat-error elements, and they all get applied, but they don't move.
As far as the CSS goes, I've tried most things I can think of to force it to move. The styles are applied but nothing is actually changing.
mat-error{
display: block !important;
position: relative !important;
margin-bottom: 40px !important;
padding-bottom: 40px !important;
z-index: 999;
}
Why is this happening?

Change your css to class: .mat-error instead of mat-error.
In order to change styles in angular materials you should define a global stylesheet declared in the styles array of your angular.json configuration file. and custom all mat styles within.
In Styles.css:
.mat-error {
color: aqua;
}
The result will be:
Please read Customizing Angular Material component styles article for better explanation.

Unable to style the icon in the Alert component in material in react using a separate css file

I need help understanding how to make my code work. I'm working with MUI styling my components using a separate CSS file. I'm trying to style the following an Alert component and it doesn't work. I want to specifically style the alert icon, however, this style doesn't work.
JSX component:
<Alert severity='error' className='passwordAlert'>
Invalid Password
</Alert>
CSS component (this works):
.passwordAlert {
border-radius: 100px;
width: 80%;
margin-bottom: 0%;
margin-top: 1%;
height: 50px;
padding: 0px;
align-items: center;
}
CSS component (this is the part that doesn't work):
.passwordAlert.MuiAlert-icon {
padding-left: 5%;
}
I would like to continue using a separate file for style and I know that there are other styling methods, but is there a solution using className and a separate CSS file?
Thanks in advance.

Combining selectors won't work here as MuiAlert-icon and .passwordAlert don't occur in the same element. Write CSS for MuiAlert-icon separately.

You shouldn't create a separate file and customize MUI components. MUI has many strategies for customizing components. you can read How to customize MUI components

removing effect of ng-deep on component destroy

I hate to use ng-deep but there is no better alternative for this.
I am using VMware Clarity https://v1.clarity.design/modals in my project and for some cases, I need to overwrite modal-body class. So, I am overwriting it using this in my component.scss file:
::ng-deep .modal-body {
overflow-y: visible;
overflow-x: visible;
}
This serves my purpose. But the problem starts for other modals. After opening above modal, if I open any other modal, above styling affects those too. I want above styling only for one modal. So how I can do that.
I was wondering if there is an option to reset above style when the component gets destroyed or What Angular Suggests.

You can just write your selector to be more specific so it targets only the desired modal.
<clr-modal class="overflow-modal">...</clr-modal>
::ng-deep .overflow-modal .modal-body {
overflow-y: visible;
overflow-x: visible;
}

Disable a css rule in the style chain

I have a small problem and I'm not sure there is a real way to do what I want easily.
I have multiple stylesheets available:
a Bootstrap stylesheet is loaded first
Multiple modules are loaded
In one module, there is a rule like this:
.container .container {
padding-left: 0px;
padding-right: 0px;
width: auto;
}
This effectively prevent me from using stacked containers in my layout. I'd like to disable this rule.
I can technically override it before or after it is declared but I don't want to reset the styles... Let say I just want this rule to cease to "work".
I tried to override it with:
.container .container {
padding-left: inherit !important;
padding-right: inherit !important;
width: inherit !important;
}
But that doesn't work. What I'd like to achieve is effectively disable a style in the stylesheet chain since the bootstrap has multiple styles with media queries, it could be a bit complicated to reapply the bootstrap styles for the container after the css stylesheet that breaks my styles is loaded.
As far as I know there is no way to do that other than reapplying the styles.

Override style in jquery.mobile-1.0b3.min.css

I am building a mobile site using jquery.mobile-1.0b3.min.css. If I download the css file, I lose some of the effects and icons from the theme I'm using. But I need to override some styling in that file even though it's hosted at jquerymobile.com.
The style I need to override is ui-select. The width attribute of this style is width: 60%, but I need to remove that style altogether while leaving the rest intact.
.ui-select {
width: 60%;
display: inline-block;
}
Is there a way to remove width: 60%; without effecting display: inline-block;?

You can add your own stylesheet that overrides any previous styles. (Just make sure your custom stylesheet loads after the jQuery stylesheet.)

Resources