I'm using styled-components in the TypeScript React application, and I have a Router on top of it.
Is it possible to style Link element from react-router-dom with styled components?
Something like this one maybe:
const HeaderLink = styled.Link`
background-color: hotpink;
`
It's possible, just pass Link as argument to the styled function:
const StyledLink = styled(Link)`
color: green;
`;
Related
I want to make a generic component using styled components which will accept the styling properties as props. IN my case it will be a Card which will have title, avatar, name, badge and other stuff.
I want each of the element to have style prop which can be done and that something I know but how do I pass props for hover and active state stylings ?
Sample code: https://codesandbox.io/s/bold-mendel-lismke?file=/src/App.tsx
I want a different background on hover, I've tried but that's not working, how do I achieve that ?
Edit: Also I want to show a different background color when card is clicked and it will remain the same unless the user toggles
You're overriding styles from "styled components" with your style attribute.
<StyledCard style={props.cardStyle} // <-- don't use this with styled-components
You can use one or the other but don't mix them. When using styled components, pass the styles instead:
<StyledCard {...props}>
and define your styled-component as:
const StyledCard = styled.div`
background-color: ${(props: CardProps) => props.cardStyle.background};
width: ${(props: CardProps) => props.cardStyle.width}px;
height: ${(props: CardProps) => props.cardStyle.height}px;
&:hover {
background-color: ${(props: CardProps) => props.hoverBackground};
}
`;
You can see this sandbox for reference.
I am using an external library in react called "drag and drop files"
This library only allows adding children to the component and style them.
My problem is, the library's component style "the parent" has unnecessary style elements, and I'm only able to modify the children and change their style inside the parent element. However, I can't change the element's style itself.
My question is, is there a way to update the parent component style even though there's no direct access to it?
Inspect html elements with your browser.
And you can change the styles in your style.css using classes or elements or ids that you inspected.
sorry don't have enough rep for a comment but I would think that if you can get the name of the parent element and if you use styledcomponents (https://styled-components.com/)
you could just override the elements styling by creating a styledversion of it.
for example an Avatar from mui would be overridden by
const StyledAvatar = styled(Avatar)`
background-color: black;
color: white;
`;
You'd still need to import the element though.
a normal element (div for example) could be styled by doing the following:
const StyledDiv = styled.div`
background-color: black;
color: white;
`;
hope this kinda helps.
Edit: to use your own styled components, don't forget to export them :)
I'm about to build a small project in react using styled component, however, I have a question for using this package. I would like to create a styled component that brings together several classes but I don't know how to do, for example :
<div class="search-input search-input-small">
How to turn it into a styled component ? In css there are two different classes, but in styled component i don't know.
Thank you.
There are a few ways to do this. For example, you could run with the base styling on a styled component and then "upgrade that with the additional styling.
const Div = styled.div`
/// styles for className -> search-input
}`
const SmallDiv = styled(Div)`
/// styles for className -> search-input-small
`
Also, if you know SASS you can structure your CSS with nesting using &. e.g.
const Div = styled.div`
.search-input {
//CSS
&-small {
//CSS
}
}
`
With styled-components, you can go with a similar format.
Here we are creating a styled component named Div, within the styled component I've declared classes .search-input and .search-input.search-input-small to style the div from your example.
The Div is being treated as a parent container.
const Div = styled.div`
display: flex;
background-color: black;
.search-input {
background-color: blue;
}
.search-input.search-input-small {
color: white;
}
`;
We call the newly created styled component like this:
export default function App() {
return (
<Div>
<div className="search-input search-input-small">Hello</div>
</Div>
);
}
As you can see the <div class="search-input search-input-small"> from your example is a child to the parent Div. The parent Div does not require styles but I have included them for this example.
Also here is a codesandbox with a working example.
So I have two components... a Navbar component, and an AboutPage component.
They are both in the same directory, 'App'
App
-- Navbar --> Navbar.css, Navbar.js
-- AboutPage --> Aboutpage.css, Aboutpage.js
So as you can see, they have two separate stylesheets.
In the JS pages the correct CSS file is being imported as well.
When I do a style like this for example:
Navbar Component
p { background: red }
^^ this style also applies to the p's in the Aboutpage. I even tried to give the P in Aboutpage its on id and style it that way and it still failed.
That's the expected behaviour.
No matter which file you specify a rule like p { background: red }, it's going to be applied to all DOM.
Specifying and id attribute to won't work either. The above rule is general enough to apply to all <p>s.
If you want to specify css files for each component, you should also create component specific css classes. Like the following example.
import React from 'react';
import './DottedBox.css';
const DottedBox = () => (
<div className="DottedBox">
<p className="DottedBox_content">Get started with CSS styling</p>
</div>
);
export default DottedBox;
and its css file:
.DottedBox {
margin: 40px;
border: 5px dotted pink;
}
.DottedBox_content {
font-size: 15px;
text-align: center;
}
If you want different ways of defining css for React, this resource adds 3 more ways of doing so, in addition to the above way.
You can also use css modules. They scope your CSS locally and are awesome
Scoping styles to a component requires WebComponents which relies on several newer browser features, particularly shadowRoot "shadownDOM" which supports this separation directly. These are most easily used with lit-element and/or Polymer 3.
Sometimes we need a global CSS which could affect another component even if we use module import, I didn't find anything to answer that in the official documentation, so my workaround is to use something like the following code in the component itself, and, it works fine :)
<style>
{
`
#page {
padding:0;
margin-top:0;
margin-bottom: 0;
margin-left: 0;
margin-right:0;
}
#media print {
#page {
size: 80mm 21cm;
}
}
`
}
</style>
Who knows how to customize Ant.design styles in proper way?
For example, I want to change the default backgroundColor and height of Header section:
import React, { Component } from 'react';
import { Form, Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;
export default class Login extends Component {
render () {
return (
<div>
<Layout>
<Header style={{backgroundColor: '#555555', height: '5vh'}}>header</Header>
<Layout>
<Content>main content</Content>
</Layout>
<Footer>footer</Footer>
</Layout>
</div>
)
}
}
Is it ok, or there is a better way to customize styles?
Because I have not found some component's attributes or smth. like this.
Antd has externized most of their styling variable in LESS variables
as you can see in
https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
To be able to overwrite those variables you need to use modifyVar function from LESS
you can find more about theming here
So to your specific question, #layout-header-background does the job
This is how i customized the default antd styles in a particular component
In scss or less
.booking_information_table {
:global {
.ant-table-thead > tr > th,
.ant-table-tbody > tr > td {
padding: 0 0 !important;
background-color: unset;
border: none;
overflow-wrap: break-word;
}
}
}
In js file
after the import statement
import styles from './component.module.less'
In return
<Table
dataSource={bookingInformationDataSource}
columns={bookingInformationColumns}
pagination={false}
className={styles.booking_information_table}
/>
My personal approach (I'm working with dva-cli though):
Every time I need to override the CSS, I use a CSS file located in the same folder and import it such as:
your-component.js:
import styles from './your-stylesheet.css';
...
< AntdComponent className= {styles.thestyle} />
your-stylesheet.css:
.thestyle {
background-color: '#555555';
}
In the less file(like a CSS) you can handle customize styles. For
example in your case
.ant-layout-header{
height: 100vh;
background-color:#f50;
}
If you use Ant card
.ant-card-head{color:#j14}
I hope you can understand now
The above mentioned approaches work for simple components like Header but don't always work for complex components like Menu, Tabs, Collapse, Select, and others, due to styles nesting priority. At work we use the approach described by jayanes but we go deeper into nested Ant Design classes. Let me explain it in the following example: when you import Tabs from "antd", you have only 2 tags to override styles for: Tabs and TabPane.
<div className={styles.tabsContainer}>
<Tabs className={styles.tabs}>
<TabPane className={styles.tabPane}>
Tab 1 Title
</TabPane>
</Tabs>
</div>
But this antd component has a very complex structure. You can verify in dev tools: it has .ant-tabs-bar, .ant-tabs-nav-container, .ant-tabs-tab-prev, .ant-tabs-tab-next, .ant-tabs-nav-wrap, .ant-tabs-nav-scroll, .ant-tabs-tab-active, .ant-tabs-ink-bar and others.
The way to go is: in your less file nest the .ant-... classes inside your own parent component's className (in order to avoid overriding all the antd classes in the whole app after code compilation). Write there your own css properties, for example:
.tabsContainer {
.ant-tabs-tab-active {
background: #fff266;
color: #31365c;
&:hover {
color: darken(#31365c, 5%);
}
}
.ant-tabs-ink-bar {
background: #fff266;
}
}
If you still need more detailed explanation, please refer to the video I posted on YouTube on how to customize Ant Design components - tabs.
Override the component style
Because of the special needs of the project, we often meet the need to cover the component style, here is a simple example.
Override the component style
Customizing Antd theme Colors can be a hassle thus, I created a package that allows you to change them easily with post CSS you can even change them to CSS variables and change them in runtime.
For more info https://www.npmjs.com/package/ant-post-css-theme