I've got a lot of table rows in my app. Some are links, some are not. Here is an example of one that is:
<tr [routerLink]="['/invoices', invoice?.invoice.id || 0, 'sms']">
I want to style all tr's with a routerLink like this:
tr[routerLink] {
cursor: pointer;
}
But it does not work. What is the correct CSS here? thanks
Use the compiled attribute ng-reflect-router-link : stackblitz
a[ng-reflect-router-link] {
color: red;
font-weight: 700;
}
tr[ng-reflect-router-link] {
cursor: pointer;
}
You can use a directive to add a class to every row with a routerLink attribute. Then style it in the css like normal.
import { Directive, HostBinding } from '#angular/core';
#Directive({
selector: 'tr[routerLink]'
})
export class ClickableTableRowDirective {
#HostBinding('class')
className = 'clickable-table-row';
constructor() {
}
}
.clickable-table-row {
cursor: pointer;
}
html:
<a [routerLink]='link' [ngClass]="{'router-link-active': true">{{name}}</a>
css:
.router-link-active {
cursor: pointer;
}
In your case the problem because of '[ ]' these brackets
so if you want to indentify which is the link and which is not then try below code
here's is example
<tr [routerLink]="['/invoices', invoice?.invoice.id || 0, 'sms']" routerLinkActive="active>
and in style.css
tr[routerLinkActive] {
color: red;
}
here is Stackblitz demo
this style only apply on those are links
Related
I have a component like this:
// MyComponent.tsx
export function MyComponent(): React.ReactElement {
return <Wrapper>
<Text>
hello there
</Text>
<AnotherText>
bye bye
</AnotherText>
</Wrapper>
}
export const Wrapper = styled.div`
color: #FEB240;
background: #f5f5f5;
padding-bottom: 5rem;
padding-left: 7rem;
padding-right: 7rem;
gap: 2rem;
`;
export const Text = styled.span`
width: 50%;
cursor: pointer;
color: rgba(28, 33, 120, 1);
`;
export const AnotherText = styled.span`
color: red;
`;
I want to be able to style the wrapper. I tried to like this (from this answer Styling Nested Components in Styled-Components), but I don't see any change:
// AnotherPlace.tsx
const NewlyStyledMyComponent = styled(MyComponent)`
${Wrapper} {
color: brown;
background: magenta;
}
`;
It seems that MyComponent also need to take (generated) className as props and assign it to the root wrapping element to make the nested styles to work as expected.
Simplified live demo: stackblitz
A basic example in MyComponent:
import styled from 'styled-components';
interface Props {
className?: string;
}
export const Wrapper = styled.div`
background-color: hotpink;
`;
export const Text = styled.span`
color: #fff;
`;
function MyComponent({ className }: Props) {
return (
<div className={className}>
<Wrapper>
<Text>Hello</Text>
</Wrapper>
</div>
);
}
export default MyComponent;
And at where it is imported and used:
import styled from 'styled-components';
import MyComponent, { Wrapper, Text } from './MyComponent';
const NewlyStyledMyComponent = styled(MyComponent)`
margin-bottom: 7px;
${Wrapper} {
background-color: indigo;
}
${Text} {
color: gold;
}
`;
function App() {
return (
<div>
<NewlyStyledMyComponent />
<MyComponent />
</div>
);
}
export default App;
There are indeed 2 issues:
To style a custom React component (even just so that its nested components can be styled), you always need to take a className prop and to apply it on one of your rendered elements, as explained in styled-components docs:
The styled method works perfectly on all of your own or any third-party component, as long as they attach the passed className prop to a DOM element.
To style nested components, the className of the parent element must be applied on a parent DOM element as well; that is why JohnLi's answer has to add an extra <div className={className}> around the <Wrapper>.
But in your case, you could just style MyComponent and apply the className on the <Wrapper>:
export function MyComponent({
className
}: {
className?: string;
}): React.ReactElement {
return (
// Apply className directly on the Wrapper
<Wrapper className={className}>
This text can be re-colored
<Text>hello there can be re-colored if styling nested Text</Text>
<AnotherText>bye bye</AnotherText>
</Wrapper>
);
}
const NewlyStyledMyComponent = styled(MyComponent)`
/* Directly style MyComponent */
color: brown;
background: magenta;
/* Styling of nested components */
${Text} {
color: white;
}
`;
Demo: https://codesandbox.io/s/vibrant-worker-05xmil?file=/src/App.tsx
I have been learning react styled component and now I am stuck at a point where I am trying to style the first and last child of styled Wrapper in react and my styled are not applying.
Need help in understanding why it is not working.
Below is the codesandbox link and my code.
https://codesandbox.io/s/target-first-child-css-styled-components-forked-9i65re
import ReactDOM from "react-dom";
import styled from "styled-components";
const Text = styled.div`
color: green;
font-size: 20px;
&:first-child {
color: red;
}
&:last-child {
color: blue;
}
`;
function App() {
return (
<Text>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
</Text>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
this selectors means when the parent itself is the first child or the last child, in this case, it is both :D this is why it's blue, what you want to do is:
const Text = styled.div`
color: green;
font-size: 20px;
& div:first-child {
color: red;
}
& div:last-child {
color: blue;
}
`;
Which means when a child div is the first or the last
Add space between & and '*-child'.
Also if you have nested divs, they will be affected too...
https://styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting
So, I have a navigation bar with router-links. What I want is for the selected link to remain highlighted on selection, so that the users know which page they are on. Currently I have something like this.
<div class="mynav">
<router-link to="...">...</router-link>
....
</div>
...
.mynav {
...
}
.mynav a {
...
}
.mynav a:hover {
...
}
I tried to use .mynav a:active, but that didn't work.
in /router/index.js:
export default new Router({
linkExactActiveClass: 'is-active', // this is important
routes: [
{
path: '/main',
name: 'Main',
component: Main
},
then router-link should looks like this:
<router-link class="nav-link pl-0" to="/main">Main</router-link>
and then in CSS for example:
.router-link-active {
border: 1px solid #fff;
color: #fff !important;
}
Just add this style to the style tag inside the Vue component:
<style lang="css">
.router-link-exact-active {
border-bottom: 1px solid #123456;
}
</style>
You want to be defining your tag with more arguments. See https://router.vuejs.org/api/#active-class for details.
So for your example:
<router-link to="..." active-class="active" ></router-link>
Alternatively, you could alter where you configure the router:
export default new Router({
...,
linkExactActiveClass: 'is-active',
routes: []
})
See https://forum.vuejs.org/t/add-and-remove-is-active-class-v-for-router-links/24859 for more details.
I am trying to define global colors, and I wrote a scss compiler to compile all color to its respective class names, But when I try to use them in my html div, the color is not applying to it.
scss snippet:
$blue-1: #001233;
$blue-2: #002132;
$blue-3: #004237;
$blue-4: #003027;
$blue-5: #CCCCCC;
$blue-6: #FFFFFF;
$allcolors:$blue-1 $blue-2 $blue-3 $blue-4 $blue-5 $blue-6;
#each $color in $allcolors {
.color-#{nth($color, 1)} {
color: nth($color, 1);
}
}
I am calling this in my html div as
<div class="color-#CCCCCC">TEST</div>
I don't see my style applied & when I tried compiling it, I can see my css style compiled as shown below
.color-#001233 {
color: #001233;
}
.color-#002132 {
color: #002132;
}
.color-#004237 {
color: #004237;
}
.color-#003027 {
color: #003027;
}
.color-#CCCCCC {
color: #CCCCCC;
}
.color-#FFFFFF {
color: #FFFFFF;
}
any help would be appreciated.
You need to escape the # in your CSS file since it's a special character used for ID selector.
.color-\#CCCCCC {
color: #CCCCCC;
}
<div class="color-#CCCCCC">TEST</div>
you can adjust your SCSS accordingly to add \
$blue-1: #001233;
$blue-2: #002132;
$blue-3: #004237;
$blue-4: #003027;
$blue-5: #CCCCCC;
$blue-6: #FFFFFF;
$allcolors:$blue-1 $blue-2 $blue-3 $blue-4 $blue-5 $blue-6;
#each $color in $allcolors {
.color-#{unquote("\\" + $color)} {
color: $color;
}
}
app.html
<app-chat></app-chat>
chat.html
<h1>Hello</h1>
chat.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-chat',
templateUrl: './chat.component.html',
styleUrls: ['./chat.component.css']
})
export class ChatComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
chat.css
h1 {
background-color: #000;
}
I need to know why the chat.css doesn't work in my browser. When I used CSS directly without chat component it works (like below).
app.html
<h1>Hello</h1>
app.css
h1 {
background-color: #000;
}
So what is the solution?
Try this!
::ng-deep h1{
background-color: #000;
}
Try !important in your chat.css file
h1{
background-color: #000 !important;
}
or
Use the powerful weapon of CSS style.css. But, before using it you have to set the class name for h1 tag.
chat.html
<h1 class="exampleClassName">Helo<h1>
Next, in your style.css file
.exampleClassName{
background-color: #000;
}
I did an example and it works: https://stackblitz.com/edit/angular-u99pry