import React, from "react";
import styled from "styled-components";
import { Link } from "react-router-dom";
const StyledLink = styled(Link)`
text-decoration: none;
cursor: pointer;
color: black;
font-size: 14px;
line-height: 22px;
font-weight: 60";
color: #393e46;
letter-spacing: .01em;
`;
const App = () => {
return <StyledLink>some text</StyledLink>
}
export default App;
I'm trying to style the Link component from react-router-dom with Styled components syntax, but it breaks my whole app and it does not work as intented.
Inside the Link component, there is an a tag, you need to style her:
styled(Link)`
a {
your style here
}
`
Related
I'm playing around with styled-components and having troubles working with material-ui. So thats the code:
import React from "react";
import styled from "styled-components";
import ChatIcon from "#mui/icons-material/Chat";
import MoreVertIcon from "#mui/icons-material/MoreVert";
import { Avatar} from "#mui/material";
function Sidebar() {
return (
<Container>
<Header>
<UserAvatar className={"override"} />
<IconsContainer>
<IconButton>
<ChatIcon />
</IconButton>
<IconButton>
<MoreVertIcon />
</IconButton>
</IconsContainer>
</Header>
</Container>
);
}
export default Sidebar;
const Container = styled.div``;
const Header = styled.div`
display: flex;
position: sticky;
top: 0;
background-color: white;
z-index: 1;
justify-content: space-between;
align-items: center;
padding: 15px;
height: 80px;
border-bottom: 1px solid whitesmoke;
`;
const UserAvatar = styled(Avatar)`
height: 60px;
`;
const IconsContainer = styled.div`;
The styled div is working completely fine, but when I import 'Avatar' from #mui and try to add some styling named UserAvatar, it is completely ignoring what I'm writing down.
I think that with mui they have their own version of styled for styled components. https://mui.com/system/styled/
It appears they want you to use it rather than styled-components
import Button from '#mui/material/Button';
import { styled } from '#mui/material/styles';
const CustomButton = styled(Button)({
// your custom styles go here
}) as typeof Button;
see the import from import { styled } from '#mui/material/styles';;
I am using react-select with styled component and it is working but I want to use tailwind classes using twin macro.
import tw from 'twin.macro';
import styled from 'styled-components';
import Select from 'react-select';
export const StyledReactSelect = styled(Select)(() => [
`
.Select__control {
height: 40px;
width: 100%;
border: 1px solid #a1a1a1;
border-radius: 0;
cursor: pointer;
}
.Select__control:hover {
border-color: #a1a1a1;
}
.Select__control--is-focused {
box-shadow: 0 0 0 1px black;
outline: none;
}
.Select__indicator-separator {
display: none;
}
.Select__menu {
color: #3c3d3e;
}
`,
]);
Now I want to use tw(twin-macro) with classes of react-select. can anyone help?
Considering tailwind, tw and styled components are properly set up. We can do something like this:
import tw from 'twin.macro';
import styled from 'styled-components';
import Select from 'react-select';
export const StyledReactSelect = styled(Select)(() => [
`
.Select__indicator-separator {
${tw`hidden`}
}
.Select__menu {
${tw`text-blue-600`}
}
`,
]);
since we have intigrated tailwind we can use them like below
import styled from 'styled-components';
import tw from 'twin.macro';
export const FooterStyled = styled.footer`
${tw`flex bg-gray-800 flex-col`}
`;
I'm trying to remove underline for my Link in react by using styled-components
if I use style={{textDecoration: "none"}} it will work but when I use text-decoration: none; in my styled components it won't work:
here is my js code:
import React from "react";
import styled from "styled-components";
import { Link } from "#reach/router";
import { CSSTransition, TransitionGroup } from "react-transition-group";
const StyleNavbarContainer = styled.nav`
background-color: #333333;
width: 100%;
color: #d6d6d6;
position: fixed;
text-align: center;
top: 0;
`;
const AppleLogo = styled.div`
font-size: 20px;
display: inline-block;
`;
const StyleLinkList = styled.ul`
display: inline-block;
`;
const StyledLink = styled(Link)`
padding: 12px 10px;
color: #d6d6d6;
text-decoration: none;
`;
const Navbar = (props) => {
return (
<>
<StyleNavbarContainer>
<AppleLogo>
<i class="fab fa-apple"></i>
</AppleLogo>
<StyleLinkList>
<StyledLink to="/">Mac</StyledLink>
</StyleLinkList>
</StyleNavbarContainer>
</>
);
};
export default Navbar;
add my App.jsx file here is the code:
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from "./components/Navbar";
function App() {
return (
<div className="App">
<Navbar />
</div>
);
}
export default App;
Need to remove import "bootstrap/dist/css/bootstrap.min.css"; from App.jsx
When I am trying to use font-weight and font-family when creating a styled component, nothing happens. Is there some specific way to set font-weight and font-family, when using styled components?
Any help is appreciated. Thanks in advance.
export const H3 = styled.h3`
font-size: ${fontsize.H3FONTSIZE};
font-weight: 700;
font-family: "museo", Helvetica Neue, Helvetica, sans-serif;
`;
What you have works perfectly fine.
Complete example
import React, { Component } from 'react';
import { render } from 'react-dom';
import styled from 'styled-components';
const fontsize = {
H3FONTSIZE: '400px',
}
export const H3 = styled.h3`
font-size: ${fontsize.H3FONTSIZE};
font-weight: 10000;
font-family: "museo", Helvetica Neue, Helvetica, sans-serif;
`;
class App extends Component {
render() {
return (<H3>Hello</H3>)
}
}
render(
<App />,
document.getElementById('root')
)
Demo: https://stackblitz.com/edit/styled-components-rbd4xo?file=index.js
import styled from 'styled-components';
import { Button } from 'antd';
const StyledButton = styled(Button)`
height: 100%;
border-width: 0px;
&:hover {
color: palevioletred;
border-color: red;
}
`;
export default StyledButton;
Overriding style of antd Button component is not working?
I just take your code and it overrides the style of antd correctly. There may be some other reason