I'm looking for a way to customize the color/width of the connector line in Ant Designs Steps component:
I've tried looking through the inspector but the connector doesn't appear as it's own element which means I can't style it through className.
Thanks in advance for any help.
You can override .ant-steps-item-title class to achieve this. For example:
.ant-steps-item-title:after {
background-color: red !important;
}
DEMO
You may decide to use sx attribute on Stepper:
<Stepper
sx={{
...
'& .MuiStepConnector-line.MuiStepConnector-lineHorizontal': {
borderColor: 'red',
},
}}
/>
That way you avoid to user !important that isn't recommended.
Same way you may use another attributes like width and color.
Related
Can somebody help me how to change the css property of mui icons so that i can assign a perticular color when the icon is on focus...I have used the icons in header and am rendering specific pages under them so for differentiating which page is currently active i want to assign different color on focus.
Here is my code-
<PeopleOutlineIcon onClick={()=>navigate('/dashboard/candidates')}
sx={{
color:"black",
fontSize: 40,
cursor: "pointer",
"& :focus": {color:"blue"}
}}
/>
I think this codesandbox will be useful to you.
You should use the 'IconButton' component from MUI to wrap the Icon. And apply the styles in the IconButton to make it work on focus.
Basically, the property is called '&.Mui-focusVisible'.
First, you don't need to add & to access pseudo-classes of the MUI icon. Second, I think :focus pseudo-class is mainly used for <input/> elements. What you are looking for is either :hover or :active.
You can try these classes this way
<PeopleOutlineIcon onClick={()=>navigate('/dashboard/candidates')}
sx={{
color:"black",
fontSize: 40,
cursor: "pointer",
":active": {color:"blue"},
":hover": {color:"blue"},
}}
/>
I use vant ui components in vue, like buttons, I want to make a litte changes of it's style, like color, border ...., but I don't how to complete it, anyone could help me solve the problem? Thanks in advance!
I have tried add css or inline-style on element, but don't work!
Any custom component's css can be changed by using deep selector
GitHub Reference- https://github.com/vuejs/vue-loader/issues/913
Use ::v-deep in this case, as /deep/ will get deprecated.
Reference - Deep Selector
Just inspect class of the rendered element which you want to modify using devtools in chrome or any browser console.
Then, In you consuming component, modify it
<style scoped>
::v-deep vant-component-class {
background: red; //
}
</style>
I am working on an Angular2 project and my application is mostly built with the PrimeNG framework delivered by the same company that creates PrimeFaces.
I ran into a problem, where I want to customize the colors and the overall appearance of an Accordion panel, and I can't figure out how to get it done with the styleClass property.
Where should I set it? WebStorm doesn't seem to like it if I do it this way:
<p-accordionTab header="Personal Information" styleClass="myStyleClass">
Content
</p-accordionTab>
Furthermore, I'd love to know how should I craft my CSS in order to make it work?
Appreciate your input! :)
I am working with primeng as well and the way it should work based on your example is the following:
p-accordionTab.myStyleClass {
width: 500px;
}
BUT there are a lot of bugreport that styleClass is not working properly.
So I advise you to use the default style classes primeng defines:
ui-accordion
ui-accordion-header
ui-accordion-content
so using them like this in style.css is working for me:
.ui-accordion {
width: 500px
}
You can define your .css file in your angular-cli.json the following way:
"styles": [
"styles.css"
]
Hope it helps!
if your looking for easy ngClass solution
here's a small example
(..)
<p-accordionTab [selected]="true" [ngClass]="elementFilter ? 'highLightFoundElement' : ''">
(...)
:host ::ng-deep .highLightFoundElement > div > a{
background-color: blueviolet !important; //your choice colour
}
I have a web app using angular 2 and angular materials. I am using a simple modal:
<h1 md-dialog-title *ngIf="data">{{data.title}}</h1>
<div md-dialog-content>What would you like to do?</div>
<div md-dialog-actions></div>
But when I run the app the modal's height is 100%. When I inspect with Chrome dev tools, it looks like Angular Materials/Angular 2 is injecting some classes that wrap around the md-dialog-content. Here is a snapshot:
Anyways, does anyone have any suggestion how to override the behavior so I can manually affect the size? Thanks.
Have you tried opening your dialog with specific height that you need? like:
let dialogRef = dialog.open(UserProfileComponent, {
height: '400px',
width: '600px',
});
Another way to force custom styles is to customize the theme itself. you can have a look at the guide here.
You can override material styling from your scss/css.
But due to view encapsulation, you need to use /deep/ selector that will allow you to get hold of the Material class added when the component is rendered. For example:
/deep/ .mat-tab-group.mat-primary .mat-ink-bar{
background-color: red;
}
With React Starter Kit's Isomorphic CSS style loader for Webpack how'd I pass in the style object instead of the class name?
We can currently do this:
<div className={s.root}>...</div>
and I wonder if we can do something like this:
<FooBar style={s.root.toObject} />
I'm looking for a solution that also works when server-side rendered.
I assume, you want to convert a piece of CSS into inline style object? E.g. .comp { border: 1px solid red; } would become { comp: { borderWidth: 1px, borderStyle: 'solid', borderColor: 'red' }. For this task you may want to search for another NPM package (both css-loader and isomorphic-style-loader are intended to solve a different problem). Try Radium.