I'm currently having the problem that I leverage the Airbnb dates in two different locations within my React project. The dates are styled differently. Therefore, I created 2 separate CSS files that overwrite the default styling.
Even though, there are 2 different CSS files in 2 different locations the latest changes overwrite the initial styling changes. So for some reason, both datepickers share the same styling.
I want to mention that I use style-loaders.
Any ideas?
2020:
For anyone who comes across this now and also has this issue, you may have tried to use CSS modules since that would eliminate the “global CSS” problem.
However, I tried that and it doesn’t load CSS module files so that won’t work at all.
However, I was able to solve it by using styled-components. Each datepicker had it own component and I used styled-components to write a base container and then, ALL the override styles for each datepicker goes into that styled component.
Boom, that solves the problem of the CSS styling clashing globally.
Related
I'm looking for a way to improve performance by minifying my app's CSS class names. This approach is used by large websites and is also described in this article.
Does anybody have an idea on how to do this with Angular CLI v10+ ? Ideally I'd want to add a webpack plugin while keeping the CLI for compilation, or a similar approach with minimal footprint, obviously for production builds only.
You can achieve something using the ViewEncapsulation API. By default it uses Emulated which generate large CSS class names. If you change that in your components to ShadowDom. This will encapsulate the styles and will shift everything to use Shadow DOM. With Shadow DOM the styles won't be leaked outside the components. You have to test it though and check for browsers support because it's not supported everywhere. Also, global styles might not work as you expect.
Edit: I also found this interesting article that explain something similar using Angular.
I'm making a react app with styled-components and I want to create a component that will be just like using col col-x and another for row classes from bootstrap.
But my problem is that I can't find the styles for that, I searched for every .col word in the repo and couldn't find anything.
How can I make a component using styled-components that recreates bootstrap col col-x and row without importing the entire bootstrap?
You should be able to get it from the Bootstrap CDN https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.css.
I usually approach this kind of issue by creating a page where I load the library I try to partially emulate and apply it to the structure that I will intend to have. I will extract CSS rules from the dev tools (after loading it in several browsers to find differences of use-cases) and create the same CSS rules into another page, having the same structure, but not using the other library, which is Bootstrap in this case. If there are non-CSS differences, that is, the way that structure is rendered is partially managed by Javascript, then I will make a list of things to achieve and try and find the code for that. In general this will reduce the list of things I have to implement to have only a few items, which tends to be doable.
I am working with a freelance client on the side that wants to utilize Angular Material throughout the project. However, they do not like the way that the underline looks in the angular material input. I have tried a variety of approaches to change this, but I haven't found any success yet.
To be honest, I haven't even been able to find the tag in the DOM that would let me alter that border.
Here are the Angular Material docs, as you can see all of the available options have at least some form of a bottom border.
Some approaches I've tried:
This one is from the old angular material and no longer works for the new angular material
The accepted answer here is for the new angular material, but I was not able to get it to work. I implemented exactly as described and no styling changed.
This approach looked like it would work. Unfortunately, I could not get it to work either.
Any help or input on this topic would be appreciated.
For reference, the client said that any changes that deviated from the desired design would be denied. So I have to get this to work. I believe I could maybe, possibly lobby to build a custom input component as a solution, but I know that they are dead set on Angular Material.
Edit. Added a pic of desired look:
this little code did it for me. I didn't want to display it and just set height and width to 0.
::ng-deep .mat-form-field-underline{
height:0 !important;
width:0 !important;
}
However I think its kinda hard to style the Angular Material Components and for me its sometimes better to built my own.
First of all, you'll need a .scss to be imported either within the default theme.scss or after the import of the material stylesheet in main.scss.
Now, Material offers you the option of customising colours and some of the styles by overriding their #mixins found somewhere in the Material folder ( I don't have the folder in front of me.. very sorry for the vague pointing... ).
Back to the newly added file; You can override material's default styling by checking the DOM for certain classes and then adding them in said file with the desired changes. Because the file is loaded after Material's, the default styling in overridden. Same thing applies for the #mixin you chose to override. Just have a look in the file, copy-paste the whole #mixin and change accordingly.
Now if you wish to go even further, my colleagues and I have a custom library that uses Material BUT the whole styling is stripped off leaving you with the bear input within the mat-form-group and then using a <input disabled/> with a position:absolute over it. That way you get to benefit from material without using their style.
I know I can just have a custom stylesheet that overrides the bootstrap component I wish to customize (for example the jumbotron), but is the right way to go about this "problem"? I don't think this can be done with a bootstrap theme, although I haven't read a whole lot on this subject.
You can use your browsers DevTools to inspect an element that you want to change, and in the Rules/Styles section you can see which CSS elements is it using and then you can create your own css file and paste the CSS there and change it so it overrides bootstraps element. Here is how to get the devtools from Chrome https://developer.chrome.com/devtools#dom-and-styles and from Firefox https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector. Don't forget to import your CSS customised script under bootstraps so it overrides the CSS that you wish to change.
Use twitter-bootstrap customize on their website to customize it and download the customized files. Or just create a custom CSS file and edit classes like .jumbotron and other stuff
There are a few ways to modify the default bootstrap css and no one way is inherently more or less "right" than any other. It all depends on the coding style of you and/or your team. Here is a list of a few ways that I came up with off the top of my head:
Modify the css file you downloaded from Bootstrap
(My Choice) Override Bootstrap styles with your own CSS. Just be sure to follow the rules of CSS Specificity (External < Internal < Inline) and if you have trouble getting a certain rule to apply try reading this answer or force it with !important
NOTE: This is likely NOT a comprehensive list, just a starting point.
There have been some questions regarding this topic before but I am a bit lost and I would appreciate someone to explain this to me in a different way.
Context: I am using twitter bootstrap in my rails app (without Less, not familiar with Less or what it is but that's a separate issue)
I have been teaching myself CSS and when looking at the application.html.erb file in my rails app it calls certain classes such as "nav-bar" and "container-fluid nav-collapse". I am trying to find the css file where these classes are defined (so that i can customize them) but I cannot find it. So far I have tried the bootstrap_and_overrides.css and application.css.scss files but couldnt find the navbar class. Also I have tried these links: Bootstrap CSS Editing
Editing navbar text color in twitter bootstrap but I wasnt able to have any luck.
You should never directly edit bootstrap css files.
For whatever you need to update as you mentioned use bootstrap_and_overrides.css or your custom.css file for overriding original classes and divs.
The best way to find where the classes are in css file is if you are using firefox, click:
Inspect Element and on the right side you will see the name of .css file where this class is saved.
But when you have class name you can just override this class with your rules. Don't forget to include your custom.css file though.
If you still have troubles finding where particular classes are hiding you can use firebug to track what files are loaded like this:
For each file you have the source where you can see the path and find the elements.