I'm quite new in React.
My app contains 3 datepickers, and i can only use the classic datepicker plugin from React: react-datepicker(4.8.0).
Problem is, on my design, these datepickers don't have the same style.
Another problem is that the only way for me to have a custom datepicker is to override datepicker css classes in App.css (global file), like this :
.react-datepicker__header {
text-align: center;
background-color: white;
border-bottom: none;
border-top-left-radius: 0.3rem;
padding: 8px 0;
position: relative;
font-family: "Nunito Sans", serif;
}
For example, i want to custom this class for another component in which i use a datepicker from the same plugin. I tried using "id" on datepicker, but doesn't work.
My DatePicker looks like this in the code :
<DatePicker
id="filterDatePicker"
dateFormat={"dd/mm/yyyy"}
onChange={(date) => {
const dateSelected = moment(date);
console.log("date selected ? " + dateSelected);
setDate(dateSelected);
}}
showPopperArrow={false}
open={isDatePickerOpened}
></DatePicker>
Anyone to help me solve this?
EDIT
Following this link : react-datepicker input width will not adjust to 100%
I tried to set in my App.css like this after wrapping datepicker in a div with specific class :
.filterIssueDateDatePicker > div > div.react-datepicker__navigation-icon::before {
border-color: #7695f7;
border-width: 1px 1px 0px 0;
}
It doesn't work, can someone help me for this specific example of changing navigation icon in only one datepicker?
Related
I want to override the default MUI CSS of the accordion component and I want to do this using the CSS module but problem is that the class is dynamically added by mui. Hence I cannot target that class directly.
I tried this below solution but it is not working:-
Css code:-
`.accordian_summary {
&:global(.MuiAccordionSummary-root) {
padding: 0px !important;
}
&:global(.MuiAccordionSummary-content) {
display: block !important;
}
}`
JSX Code:-
Accordian component code
DOM Tree structure and the class which I want to override
Browser code
*Note:- One of the CSS is getting applied i.e
`&:global(.MuiAccordionSummary-root) { padding: 0px !important; } `
but this is not working
` &:global(.MuiAccordionSummary-content) {
display: block !important;
}`
Please help if possible and Thanks for your help in advance.
Possible solution:
div[class*="MuiAccordionSummary-root"] {
display: block;
}
For example to change style for input error label:
label[class*="Mui-error"] {
text-decoration: underline;
}
is teher any chance to style my button inside tab in the css for vaadin-tabs component or i must do it by setclassname individually for button?
Accordin to this tutorial https://vaadin.com/docs/v14/flow/styling/styling-components
i tried:
vaadin-tabs vaadin-button{
background-color:red;
}
vaadin-tab > vaadin-button{
background-color:red;
}
[part="close-tab-btn"]{
background-color:red;
}
But none of it work. I`m importing my css by annotation:
#CssImport(value="./styles/components/tabs.css", themeFor = "vaadin-tabs")
and rest of my css looks like this:
[part="tabs"] ::slotted(vaadin-tab[selected]) {
color: var(--default-white-color);
background-color: var(--default-black-color);
}
[part="tabs"] ::slotted(vaadin-tab) {
color: var(--default-black-color);
background-color: var(--default-white-color-2);
border-radius: var(--default-border-radius) var(--default-border-radius) 0px 0px;
MARGIN-RIGHT: 3px;
}
[part="tabs"] ::slotted(vaadin-tab[selected])::before{
background-color: var(--default-app-color);
width:100%
}
*edit
But if my component is inside of dom in my slotted component then i can somehow style it from my top layout. In this example i mean if i can style input-field of text-area inside vaadin-vertical-layout
From the looks of your screenshot, the vaadin-button is not inside any shadow root. In that case, you can style it from the global styles.
For example styles.css
vaadin-button.close-tab-btn {
background-color: red;
}
and importing it with something like
#CssImport("./styles/styles.css").
Hi I just started using Material UI and am having a hard time styling the components. I am building a sign in page and would like my Submit button to be all the way to the bottom right. If someone can help me out that would be greatly appreciated because it seems to be inheriting styles from everywhere else but where I would like to!
I have tried adding
textAlign: 'right'
to buttonStyle and that does not work. I have also tried adding
text-align: right;
to my .form-button CSS.
The only thing that affects anything is removing the .App
Login.js
<div className='form-container'>
...
<Button
style={buttonStyle}
className='form-button'
variant='contained'>
Log-In
</Button>
</div>
...
const buttonStyle = {
backgroundColor: '#527354'
};
App.css
.App {
text-align: center;
}
.form-button {
width: 83px;
height: 36px;
box-shadow: 0px 1px 3px #00000033;
}
.MuiButton-label {
color: var(--primary-white);
font-family: 'Open Sans', sans-serif;
}
.form-container {
max-width: 400px;
margin: 2rem auto;
overflow: hidden;
padding: 0 2rem;
}
Another main goal would be to avoid inline styling because I do prefer keeping it within my style sheet. But if not possible or too overly difficult, I will inline style (as I did with the background-color).
As keikai has mentioned in the comment, you may check the Documentation in this link material-ui.com/styles/basics for overriding style.
For 'it seems to be inheriting styles from everywhere else'
I will suggest you to use styled-components instead of global css import, which mess up everywhere. Try this,
npm install --save styled-components
It creates a css class that only apply to the component.
Sample code:
import styled from 'styled-components'
const MyDiv = styled.div`// can be span, section, etc
// add your style here for the div
your div style(optional)
// your class css inside the div
.form-container {
max-width: 400px;
margin: 2rem auto;
overflow: hidden;
padding: 0 2rem;
}
// add more class if you have any
`
Then wrap your component with
// your newly created styled div
<MyDiv>
// component that needs your style
<MyComponent />
</MyDiv>
Your style will only be applied to MyDiv and MyComponent, and nothing else.
It may took awhile to get used to it, but it is extremely useful.
I'm new in Angular and I do not even know if this approach is good.
I want to create my own universal button component and define his styles in button.component.css. After i want to use this button in my other component like login form.
I do something like that in button.component.css:
button {
height: 50px;
width: 100px;
border-radius: 8px;
font-family: "Arial Black";
font-size: 18px;
box-shadow: none;
}
.primary-button {
background: #5c52ff;
color: white;
}
.primary-button:hover {
background: white;
border: #5c52ff solid 2px;
color: #5c52ff;
}
.secondary-button {
border: forestgreen solid 2px;
background: white;
color: forestgreen;
}
Now in index.html i do:
<app-button class="primary-button"></app-button>
But scope of button.component.css works only in button.component.html
I should to create this style classes in global style.css and don't create button component but simple use button tag and add class attribute with property from style.css. How to approach this problem.
You should be setting the class to the button present in your button.component.html instead of setting it in the app-button element. You can achieve this by sending your class to the button component as an Input.
index.html
<app-button className="primary-button"></app-button>
button.component.ts
import { Component, Input } from '#angular/core';
....
#Input() className: string;
button.component.html
<button [class]="className"></button>
This way your class will be applied within the scope of button.component.css.
I was wondering whether there is a way to customize the built-in tooltip and the header tooltip using CSS? Is there a class name that can be referenced?
Yes, there is a class called ag-tooltip in ag-grid.css
I'm able to customized the default headerTooltip, something like below:
.ag-tooltip{
background-color: #0f1014;
color: #999eab;
border-radius: 2px;
padding: 5px;
border-width: 1px;
border-style: solid;
border-color: #545454;
}
In case you want to customize tooltip using a 3rd party library, you can make use of cell renderer component.
Here is an example using angular cell renderer component and ngx-bootstrap.
#Component({
selector: 'tooltip-cell',
template: `<span tooltip="Custom text" container="body">{{params.value}}</span>`,
})
export class ToolTipRenderer implements ICellRendererAngularComp {
public params: any;
agInit(params: any): void {
this.params = params;
}
refresh(): boolean {
return false;
}
}
Once created, you can register the custom cell renderer component using frameworkComponents gridOption. You can more details in the official doc here
and more details on Cell Renderer Components
I used "Balham" theme in my code and I had to override the default tooltip CSS.
I made a file with the custom CSS.
.ag-theme-balham .ag-tooltip {
background-color: black;
color: white;
border-radius: 2px;
padding: 10px 16px;
border-width: 1px;
border-style: solid;
border-color: #cbd0d3;
transition: opacity 1s;
}
Finally, I imported the CSS file where I had implemented the Ag-Grid.
import "./customTooltipStyle.css";
This worked for me.