I have a React component that dynamically applies a CSS style class using the onClick listener. This works and when I view the generated html in the browser inspector I can see my desired output.
<div class="RecipeSection_recipe-section__Asce8 active">
<h2>Ingredients</h2>
</div>
However the styling I have defined in my React CSS Module is not applied
.recipe-section.active h2 {
text-align: center;
color: red;
}
When I remove the .active class I can see the red styling applied.
I guess because the React CSS Module adds a hash to the name it is impacting the class concatenation, but I am not sure if there is a way to resolve this within the React CSS module?
The reason the style wasn't being applied is because I had supplied the css 'active' class as a string value rather than as a reference from the imported CSS module:
import classes from "./RecipeSection.module.css";
Then I could supply the reference:
${classes.active}
The real clue was that in the initial generated html, my active class had not been allocated a hash as the recipe-section class had
<div class="RecipeSection_recipe-section__Asce8 active">
Related
My current frontend is set up with React, TypeScript, Webpack, Sass and React Bootstrap. I followed the React Bootstrap documentation and installed the dependencies.
"bootstrap": "^5.0.2",
"react-bootstrap": "^2.0.0-beta.4",
Then I added an import to include the stylesheet like so (with Sass):
// CSS reset
#import '#scss/reset.scss';
// Override the bootstrap SCSS (completely empty for now)
#import '#scss/custom.scss';
#import "~bootstrap/scss/bootstrap";
Then I import the .scss file into my App.tsx file:
import './App.scss';
Everything seems to work fine, except the .card-header class does not. It should fill up the rounded corners as shown in the Bootstrap example.
The code responsible for the picture above is copied from the Bootstrap example.
<div className="card">
<div className="card-header">Featured</div>
<div className="card-body">
<h5 className="card-title">Special title treatment</h5>
<p className="card-text">
With supporting text below as a natural lead-in to additional content.
</p>
<a href="#" className="btn btn-primary">
Go somewhere
</a>
</div>
</div>;
I have most likely forgotten some step in the installation process, but I just do not know what.
It's hard to say without seeing your whole code but seems like some other css, maybe something from custom.css is interfering with the bootstrap styling.
It turns out that the Row component from React Bootstrap passed some CSS to its children that contains padding-left and padding-right statements.
.row > * {
flex-shrink: 0;
width: 100%;
max-width: 100%;
padding-right: calc(var(--bs-gutter-x) * .5);
padding-left: calc(var(--bs-gutter-x) * .5);
margin-top: var(--bs-gutter-y);
}
This caused the problem that I had with the card header. I fixed this by adding p-0 to my card div.
EDIT: I completely overlooked the fact that React Bootstrap has a built-in Card component...
I want to add style my modal so it has (making the modal the full width of the screen and pushing it down the screen):
width: "100%,
top: "25px
to the
<div class="modal-dialog" role="document">
as it appears on the regular bootstrap modal (http://getbootstrap.com/javascript/#modals), or when react-bootstrap is used, the div is
<div class="custom-modal modal-lg modal-dialog">
but looking at the react-bootstrap site, (https://react-bootstrap.github.io/components.html#modals) we only have access too
<Modal/>
<Modal.Header/>
<Modal.Body/>
and applying those CSS settings to those won't give me the styling im looking for
If you look to the Props section for modals, it explains what possible customisations can be set on each of those (Modal, Modal.Header, Modal.Body).
For example, to add a custom-modal class to the modal-dialog element, the property dialogClassName can be set:
<Modal dialogClassName="custom-modal">
//Modal content goes here
</Modal>
Property documentation
Example with custom css class
I was using the <style> tag in the template.
Is this the best way or are there any other better ways
the css code is around 20 lines.
You can do it this way, but it would be better to use a css class. Specify the styles in a class within a stylesheet and then specify that class with a class attribute on the appropriate html tag(s) within the directive.
Something like this in a stylesheet (a file with the .css extension):
.whiteTextOnBlack {
background-color: black;
color: white;
}
And then refer to that class like this within the directive template:
<p class="whiteTextOnBlack">I'm text that has been styled</p>
I'm creating a layout generator for flexbox and I'm using AngularJS 1.5.7 components. Basically, my issue is that "replace" does not exist for component but I'd like to be able to dynamically style the root element of my component.
Say that I have a main "div" with its display set on "flex". When I click on a button, it adds a component in this "div" which will be the items of the flexbox layout. The HTML generated is:
<div style="display:flex;">
<item>
<div style="flex-grow:1;..."></div>
</item>
</div>
My issue is that the styles are applied to the "div" inside the "item" element, but "flexbox" does not work as expected as the "item" element does not have any flexbox-related styling. Note that the idea is that I also have some dropdown and textbox used to modify the CSS properties of the "item" component. The template of this one looks like:
<div class="zone" data-ng-style="$ctrl.model.getStyle()">
...
</div>
And I'm inserting this component like this:
<item model="$ctrl.item"></item>
Then, my question is: "What's the alternative to 'replace' property of directives?" or "How to dynamically style the root element of the component?".
Thanks
I was hesitant about using some Angular-only classes such as .ng-isolate-scope (due to .component() always using isolate scopes), but you could be able to provide styles for your own component:
item {
flex-grow: 1;
}
If you would like to dynamically apply classes specific to your element, you could follow the same pattern.
item.selected {
font-weight: bold;
}
Nevertheless, I'm not sure about how compliant it could be with older IE versions, though.
I'm using Foundation in a mobile first project where many elements are hidden based on the browser size, and I'm running into some trouble using Foundation's visibility classes like .show-for-small-only as Foundation applies
display: inherit !important;
to any element which uses these visibility classes. (For example, see line 5808)...
.show-for-small-only {
display:inherit !important;
}
This is causing me issues. Say have an element that I want to .show-for-small-only:
<div class="someElem show-for-small-only">
<!-- Content -->
</div>
Yet I want this element, when shown, to be formatted as a display:inline-block element. Due to Foundation's use of !important, the div is forced to assume it's default display state of block.
Is there any workaround to this, short of declaring my styling as !important too? (I don't want to have to do that though)...
I agree, using !important always feels gross.
Precedence in CSS is given to the element furthest down the tree so to override the Foundation !important property, just target an element further down the tree, like so:
<div class="show-for-small-only">
<div class="someElm">
<!-- your content here -->
</div>
</div>
With the following CSS
.someElm {
display: inline-block;
}
Here's a Plunker for kicks (just remember the items wont show up unless the screen is small).
I hope this helps.
To overwrite inportant just declare it again after the first declaration
.show-for-small-only {
display:inherit !important;
}
.show-for-small-only {
display: inline-block!important;
}
<div class="someElem show-for-small-only">
Content
</div>