In my vuejs component I have style like this
<style>
.preview-page {
.preview-section {
width: 100%;
}
.logo-section {
text-align: center;
}
}
</style>
Its building fine and showing correct results in browser, but on vscode its showing 2 errors
Do not use empty rulesetscss(emptyRules)
and
} expectedcss(css-rcurlyexpected)
OK, looks like there are two issues being picked up on:
Do not use empty rulesetscss(emptyRules) is a valid complaint, since .preview-page{} contains no styles (although its children do). Add some styles to .preview-page or suppress the warning if it bothers you.
} expectedcss(css-rcurlyexpected) I assume is triggering because you have not defined lang="scss" in your <style> tag. Here is the documentation.
Related
With third-party components, the way to include their styles is by importing their stylesheet into _app.tsx or importing the stylesheet into your component that uses the third-party component, as described here: https://nextjs.org/docs/basic-features/built-in-css-support#import-styles-from-node_modules or by adding to next.config.js like so:
// next.config.js
const withTM = require("next-transpile-modules")([
"#fullcalendar/common",
"#fullcalendar/daygrid",
"#fullcalendar/timegrid",
"#fullcalendar/interaction",
"#fullcalendar/react",
"#fullcalendar/list",
To modify the third-party stylesheet, you need to create your own stylesheet and add it to _app.tsx; those modifications might look like this:
// styles/modified-fullcalendar.scss
.fc-col-header {
width: 100% !important;
}
Another option, at least for my use case (Full Calendar) is to use CSS variables as described here in technique 2 on this page: https://fullcalendar.io/docs/css-customization. There was a lengthy thread about this on the Full Calendar issues page, as seen here: https://github.com/fullcalendar/fullcalendar/issues/5393
The problem with all of these methods of customization is that they're global, and so anywhere you use this third-party component it'll look the same. However, in my case, I want to use the component on two different pages, with different styling modifications. With most frameworks, I would simply import the relevant modified stylesheet wherever I needed it, but NextJS doesn't allow that. How can I achieve the modifications I want?
The solution is to wrap the component in a div with a specific class name, then do the css overrides in a nested format for each use case in the override file.
Explanation:
Say your third-party component is FullCalendar. It's being imported and used in the files Foo.tsx and Bar.tsx. In Foo, let's say you want the calendar cells to be green.
To make the modification, you create the file modified-fc.scss and do the following:
// modified-fc.scss
.fc-cell {
background: green !important;
}
You then import modified-fc.scss into _app.tsx in order to apply the styles globally, and you're done. However, this prevents you from changing the cell color to orange in Bar. To circumvent this, just wrap the component:
// Foo.tsx
<div className=".wrapper1">
<FullCalendar/>
</div>
// Bar.tsx
<div className=".wrapper2">
<FullCalendar/>
</div>
and then nest the classes:
// modified-fc.scss
.wrapper1 {
.fc-cell {
background: green !important;
}
}
.wrapper2 {
.fc-cell {
background: orange !important;
}
}
OR
.wrapper1 > .fc-cell {
background: green !important;
}
.wrapper2 > .fc-cell {
background: orange !important;
}
I am currently using the PrimeNG library's accordion component in my angular project. See info here.
The template includes some special css styling for printing the page--something like the following:
#media print {
.profile-progress-bar, .top-template-header-content, .header.profile-header{
display: none !important;
}
html, body {
height: auto;
font-size: 10px !important;
}
p-accordionTab > div {
display: block !important;
selected: true !important;
}
}
What I am trying to do, is automatically expand all accordionTab elements when the #media print rendering is processed for the page to be printed.
From the documentation I see that each accordionTab element has a [selected] property which can be bound to and set to "true" in order to expand the tab.
Selected Visibility of the content is specified with the selected
property that supports one or two-way binding.
However, can this be somehow automatically triggered when the #media print rendering occurs?
Thanks!
media query is the way to go, you can take a css only approach to achieve this; no change in TS or HTML files
relevant css:
#media print {
::ng-deep .ui-accordion-content-wrapper-overflown {
overflow: visible;
height: auto !important;
}
}
complete demo on stackblitz here
This is an interesting one. To keep it inside the realm of Angular, you could use the #angular/cdk/layout library and inject MediaMatcher. You could also, of course, do almost this exact same thing using JavaScript (see here... the cdk/layout method I'll show you really just wraps this).
The MediaMatcher service has a method called matchMedia, and from there you just add a listener:
import { MediaMatcher } from '#angular/cdk/layout';
constructor(private readonly mediaMatcher: MediaMatcher ) { }
ngOnInit() {
mediaMatcher.matchMedia('print').addListener(e => e.matches ?
console.log('printing!') : null);
}
So where I've put the console.log, just perform your logic to get the accordians to expand.
I'm working on an AngularJS project with the aim of slowly getting things in order for Angular 6, or whatever version is out when we start on the upgrade. One of the big pieces of that work is converting existing directives into components.
The thing I'm struggling the most with, is that every instance of a component introduces an extra element into the DOM that wraps my actual component HTML and breaks the hierarchy, making it very hard to write CSS that does what it needs to.
To illustrate my dilemma, imagine a simple component called alert that provides styling for various types of messages you want a user to pay attention to. It accepts two bindings, a message and a type. Depending on the type we will add some special styling, and maybe display a different icon. All of the display logic should be encapsulated within the component, so the person using it just has to make sure they are passing the data correctly and it will work.
<alert message="someCtrl.someVal" type="someCtrl.someVal"></alert>
Option A: put styling on a <div> inside the extra element
Component template
<div
class="alert"
ng-class="{'alert--success': alert.type === 'success', 'alert--error': alert.type === 'error'}">
<div class="alert__message">{{alert.message}}</div>
<a class="alert__close" ng-click="alert.close()">
</div>
Sass
.alert {
& + & {
margin-top: 1rem; // this will be ignored
}
&--success {
background-color: green; // this will work
}
&--error {
background-color: red; // this will work
}
}
This works fine as long as the component is completely ignorant of everything around it, but the second you want to put it inside a flex-parent, or use a selector like "+", it breaks.
Option B: try to style the extra element directly
Component template
<div class="alert__message">{{alert.message}}</div>
<a class="alert__close" ng-click="alert.close()">
Sass
alert {
& + & {
margin-top: 1rem; // this will work now
}
.alert--success {
background-color: green; // nowhere to put this
}
.alert--error {
background-color: red; // nowhere to put this
}
}
Now I have the opposite problem, because I have nowhere to attach my modifier classes for the success and error states.
Am I missing something here? What's the best way to handle the presence of this additional element which sits above the scope of the component itself?
I personally do option A. This allows you to easily identify and create specific styles for your components without fear that they will overwrite site-wide styles. For instance, I'll use nested styles to accomplish this:
#componentContainer {
input[type=text] {
background-color: red;
}
}
This will allow you to make generic styles for your component that won't spill out into the rest of your solution.
I don't know it can be write like that or not but I am trying to set height
to html item in css style. Height is being passed in context variable from Backend Django.
I am trying this:
<style>
.fc-agendaWeek-view tr {
height: '{{row_height|add:"0"}}'"px"
}
</style>
{{row_height|add:"0"}} => this is context variable passed from Django Backend which is integer i-e 70 , 80.
Where I am wrong? Can we even write like that. Any help will be appreciated.
Your CSS is invalid. It often helps a lot to View Source on a page and see exactly what your template is outputting. In this case, I think you want something more like:
<style>
.fc-agendaWeek-view tr {
height: {{ row_height }}px;
}
</style>
Which will output:
<style>
.fc-agendaWeek-view tr {
height: 70px;
}
</style>
First, let me say I understand that I have a custom component "Card" that I use in one of my routes, "Home".
Card.js
import s from 'Card.css';
class Card {
...
render(){
return (<div className={cx(className, s.card)}>
{this.props.children}
</div>);
}
}
Card.css
.card {
display: block;
}
Home.js
<Card className={s.testCard}>
...
</Card>
Home.css
.testCard { display: none; }
A problem I faced here, is that the card remained visible even though I set the display to none, because of seemingly random CSS ordering in the browser. This ordering did not change even if Javascript was disabled.
To get .testCard to correctly load after .card, I used "composes:":
Home.css
.testCard {
composes: card from 'components/Card.css';
display: none;
}
Apparently this causes css-loader to recognize that .testCard should load after .card. Except, if I disable Javascript, the page reverts back to the old behavior: the .card is loaded after .testCard and it becomes visible again.
What is the recommended way to get our page to prioritize .testCard over card that behaves consistently with or without Javascript enabled?
As I'm using CSS modules, charlietfl solution wouldn't really work as is. .card is automatically mangled to a name like .Card-card-l2hne by the css-loader, so referencing it from a different component wouldn't work. If I import it into the CSS file of Home.css, that also doesn't work, because it creates a new class with a name like .Home-card-lnfq, instead of referring to .Card-card-l2hna.
I don't really think there's a great way to fix this so I've resorted to being more specific using a parent class instead.
As an example, Home.js:
import s from 'Home.css';
import Card from './components/Card';
class Home {
...
render(){
return (
<div className={s.root}>
<Card className={s.testCard}>Hi</Card>
</div>
);
}
}
Home.css
.root {
margin: 10px;
}
.root > .testCard {
display: none;
}
This way, we don't need to know what class names component Card is using internally, especially since in cases like CSS Modules or styled components, the class name is some unique generated name.
I don't think I would have come to this solution if it wasn't for charlieftl's solution, so thank you very much for that.
Just make the testCard rule more specific by combining classes
.card {display: block;}
.card.testCard { display: none; }