Is there any way to change the content of CSS node modules in Ionic React? I have created some external css for my App but the css in import "#ionic/react/css/typography.css" overwrites my css. For example, I cannot change some margins, text color, etc.
I also tried to change some css inside typography.css but the changes are not loaded in the app. It's like I have changed nothing inside typography.css.
The first time I'm working with CSS in an Ionic App and I feel really confused. Any help would be appreciated.
Ionic is using Shadow DOM, you can read more about it in their blog post. This feature is very useful to isolate components but it is also preventing you to modify the css from outside.
To fix this problem, Ionic introduced a lot of custom CSS Variables that you can use to modify the styling of each component. This is the best way to modify the CSS of an Ionic app.
You can also read about shadow parts in another blog post and he docs, but this is less recommended.
Because Ionic uses Shadow Dom you can override this with CSS with some Ionic Variables like
--background and --color
ion-button { --background: red; }
But many times the changes are not reflected in all the components of the Shadow Root
To modify the css of the Shadown Root you can use the pseudo element :: part as indicated in this publication CUSTOMIZE CSS SHADOW PARTS for example:
ion-button part is "native" so you can use
ion-button::part(native){
height: 100px;
width: 300px;
}
Related
I'm using a button from a library (https://www.npmjs.com/package/#react-oauth/google I understand this library has a custom button option but this option results in a different response).
I basically like to change the max-width and width to another value (image attached below). May I know is there a way for me to edit these style from CSS?
Thank you! Appreciate any help.
Google adds this button to the dom inside iframe, there are certain props you can style the button
to add with, check prop width on
it's mentioned on #react-oauth/google github README
https://developers.google.com/identity/gsi/web/reference/js-reference#width
So still new myself currently in a full stack boot camp in the react section. It should be possible.
Are you using a external stylesheet or trying to do it using inline?
I was taught to use a external stylesheet
From what I am seeing try changing class name to button.
class='button'
Then in your external stylesheet add
.button {
max-width: 400px;
}
Edit. I see you are using react... So it could be className='button'
Edit:
Hello, thanks for your reply! Hmm... in this case I am not able to
assign a className to div myself as the div is from the library. The
weird class you see above "nsm7Bb..." is not by me. Hence, I was
wondering if there's a way to forcefully override library class style.
– Olympian Collections
Gotcha.
Have you tried !important?
Is that your inline CSS?
When i custom style a button notice that the text is not perfectly centered? for some reason even when i pass the important! tag to the css this is still overriden by this _reboot scss file. I have read some places that this is an issue with bootstrap which i currently have in my build. does anyone have a solution for this?
Edit
after deleting bootstrap from the project this does remove the issue however a plethora of other styling issues occur now. So i need a more targeted solution. also using id tags does not work. see image below.
The issue here while _reboot has been an apparent issue on several other Questions was simply assigning the following css selectors to the class.
button{
line-height: normal;
font-size: unset;
}
Mister Magoo was correct in his comment on the initial post.
I'm someone who is very new to Bootstrap 5 and Sass, and I've been really enjoying my time learning them both! I just have a quick couple of questions...
When it comes to customizing Bootstrap Sass, I know you can do variable overrides (to change certain colors, fonts, etc.), but when it comes to making changes to various components (such as Bootstraps Nav component), is it good practice to override some of the prewritten classes with my own changes - or should I rewrite new classes and just reference them in my HTML?
For example, I want to have a specific nav for my header with a certain colored background, hover, font, and border radius; however, I don't want to maintain that style for the other navs used throughout my page. What would I do in this instance?
My current approach is to just create some more custom variables, and then create a custom class for my nav header where certain things will be applied.
Here is how my main .scss file is set up as well:
// Custom.scss
// Option B: Include parts of Bootstrap
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
#import "../node_modules/bootstrap/scss/functions";
// 2. Include any default variable overrides here
// 3. Include remainder of required Bootstrap stylesheets
#import "../node_modules/bootstrap/scss/variables";
#import "../node_modules/bootstrap/scss/mixins";
// 4. Include any optional Bootstrap components as you like
#import "../node_modules/bootstrap/scss/root";
#import "../node_modules/bootstrap/scss/reboot";
#import "../node_modules/bootstrap/scss/type";
#import "../node_modules/bootstrap/scss/images";
#import "../node_modules/bootstrap/scss/containers";
#import "../node_modules/bootstrap/scss/grid";
// 5. Add additional custom code here
Thanks for your help!
Edit:
Here's an example of a customization. I wanted to change the nav hover option for only one use case (in my header), so I created a new file called _custom-nav.scss where I put this class:
.hover-light {
&:hover {
background-color: $nav-pills-hover-color;
}
}
I would then reference this class in my HTML so that my page is properly styled.
Is this bad practice? I would just manually change the variables and hover options within Bootstraps nav; however, I only needed this hover option for the nav in my header.
This is an opinion based question and not really suited to this kind of forum - I'm sure a dozen ppl will reply with a dozen different views.
The basics of what you've done so far is not wrong, and you can just stick with that. The thing to remember about frameworks like Bootstrap is that it is just that - a framework. Akin it to a car chassis - that's all you're "buying" > the chassis and the motor. You can certainly drive it ... but to get the most of it you should add more to it.
How that's done is many ways - from loading the whole BS5 core and then creating a separate CSS to override the default - call that a "plugin" - to compiling ones own CSS from BS5 SASS (like you're doing).
If you're asking for "best practice" that too is a misnomer - as that too will vary.. from purists who will tell you that you should not use BS5 at all and that you should create your own CSS from code to those who say don't customise anything and just use "themes" like you can get from bootswatch.com ... there is no correct answer here - just opinions.
Your answer is somewhere in the middle - and for you, you're on the right track.
I have been using boostrap 4.0 to build my website.
A newly added item requires me to use boostrap 3.3.
But after adding the boostrap 3.3 css stylesheet, the collapse/exapnd nav bar is having trouble functioning normally.
So I am thinking to use JS to apply script tag and link tag to an item with certain ID. Is that possible? Thank you.
It would be a disaster to rewrite the newly added item :(
Certain css and js components can be downloaded separately here: https://getbootstrap.com/docs/3.4/customize/
For example, if you want to use only bs X3 css for grid only you can uncheck all and then check "Grid system". You can also modify bs css by adding an extra class in front of the classes in order to make them unique.
Example ( adding a .bs-3 class for every X3 bootstrap class - it can be easily done if you download the sass files ) so wherever you use bootstrap classes along with your new class it should override the X4 classes.
.bs-3.row {
width: 100%;
max-width: 100%;
}
What you are trying is against how CSS is designed to work (applying the style to the whole site). Now, this is possible with components, like the ones provided in most frameworks that create a limiting scope for CSS and JS.
Native HTML components are not widely used nowadays.
If it is only a component, migrating it from Boostrap 3 to 4 should not be a big deal. There are not high design changes as we have between Bootstrap 3 and 4.
Other options are using the SAAS source of Boostrap 3 and rename the classes you use and add only them, but I think this would be much more work.
I am creating a mobile simulator that mocks the appearance and functionality of an iPhone (and other devices later) in a web browser, using 100% javascript, HTML5, and CSS, with the simulator fully functional with only client side code.
While trying to accomplish this task with as little modification as necessary to the original app projects themselves to be hosted in the simulator, I am injecting the <script> and <link> tags into the head of the page, then loading the html into a <div> screen.
The problem is that when I load in a new css file, it (obviously) overrides the one I'm using to style the page, and therefor some elements are affected (ex the background changes color).
My question is: Is there any way to limit the "scope" of an external .css file to apply only to objects within the <div> screen? Would it make any difference if instead of me injecting it into the <head> of the page, I inject it into a <style> element in the <div> screen?
UPDATE Support for this feature has been dropped. Please seek other options
Original Post:
You may want to look at scoped styles; see http://css-tricks.com/saving-the-day-with-scoped-css/.
The basic idea is
<div>
<style scoped>
#import "scoped.css";
</style>
</div>
However, you are on the bleeding edge here in terms of browser support. See http://caniuse.com/style-scoped.
One alternative would be to use an iframe.
Simply wrap all you css code inside the selector for parent element, say it's a div with id of foo you'd do the following:
div#foo{
//All your css
}
And convert it as less to css, it will prepend the right selectors. Note that you'll need to take care manually of things like #media queries and so on.
While writing this, the <style scoped> is deprecated by the Chrome team.
As a result I experimented with some approaches and released https://github.com/thgreasi/jquery.scopeLinkTags .
Note: you should only have to use this approach in case that you can't control the imported CSS file. If you can use SASS/LESS/anything to pre-process your CSS, you should prefer that.
A simple way is adding pre-class before all selector in css file.
I find a grunt script can do this:
https://github.com/ericf/grunt-css-selectors
This is how i do it if not using preprocessor in my project. Search for a online preprocessor then load copy paste the css under the parent class/id
.parent{
// copy paste here
}
Example
Find a preprocessor for example https://beautifytools.com/scss-compiler.php works very well for me (I have no affiliation with the given link)
if you are using from a URL add the URL using the load URL button.
Wrap the css code under parent and hit compile then minify.
I had a similar issue and found that Shadow DOM can solve it easily.
let output = d.querySelector('#output')
let shadow = output.attachShadow({
mode: 'closed'
});
shadow.innerHTML = HTMLcontent // HTML content and style injected
Source