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`}
`;
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';;
import { createGlobalStyle } from "styled-components";
import { GlobalStyles } from "styled-components";
const GlobalStyles = createGlobalStyle`
#import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet');
* {
box-sizing: border-box;
},
body {
background: #fff;
color: pink;
font-family: "Courgette", sans-serif;
font-size: 1.15em;
margin: 0;
},
p {
opacity: 0.6;
line-height: 1.5;
},
image {
max-width: 100%;
},
`;
export default GlobalStyles;
import { Container } from "./components/styles/Container.styled";
import Header from "./components/Header";
import GlobalStyles from "./components/styles/Global";
function App()
{
return (
<>
<GlobalStyles />
<Header />
<Container>
<h1>Hello World</h1>
</Container>
</>)
}
export default App;
I am trying to use GlobalStyles from 'styled-components' and want to change something within it. However, I took this kind of error: I am taking this error when I am trying to use GlobalStyles ERROR in src/components/styles/Global.js
Line 4:6: Parsing error: Identifier 'GlobalStyles' has already been declared. (4:6).
Does anyone know the answer?
I think the problem is from this
import { createGlobalStyle } from "styled-components";
import { GlobalStyles } from "styled-components";
you only need to import createGlobalStyle instead of both
import { createGlobalStyle } from "styled-components";
By the way, GlobalStyles is not existing in styled-components. I think it's invalid to import. The document for reference
The full fix can be
import { createGlobalStyle } from "styled-components";
const GlobalStyles = createGlobalStyle`
#import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet');
* {
box-sizing: border-box;
},
body {
background: #fff;
color: pink;
font-family: "Courgette", sans-serif;
font-size: 1.15em;
margin: 0;
},
p {
opacity: 0.6;
line-height: 1.5;
},
image {
max-width: 100%;
},
`;
export default GlobalStyles;
You are declaring twice GlobalStyles, one when you import it and another as a const variable. You have to delete the second line with the import and also delete the comas at the end of every selector on the styled component.
here is your code fixed:
import { createGlobalStyle } from "styled-components";
const GlobalStyles = createGlobalStyle`
#import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet');
* {
box-sizing: border-box;
}
body {
background: #fff;
color: pink;
font-family: "Courgette", sans-serif;
font-size: 1.15em;
margin: 0;
}
p {
opacity: 0.6;
line-height: 1.5;
}
image {
max-width: 100%;
}
`;
export default GlobalStyles;
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
}
`
I have an Button that I want to animate :after and ::before width onMouseOver from 0% to 50%,
and when onMouseLeave from 50% to 0
i'm using react-hooks but it's working only onMouseOver
what is my problem ?
my code in this link
https://codesandbox.io/s/cold-haze-t7b4c
You could animate things with the following using styled components. Although you could do the same with just the padding instead of using :before and :after.
File: Button.js
import styled from "styled-components";
const Button = styled.button`
display: flex;
line-height: 30px;
padding: 0;
&:before,
&:after {
display: block;
width: 0px;
content: "";
transition: all 250ms ease-in-out 0s;
}
&:hover {
&:before, &:after {
width: 50px;
}
}
`;
export default Button;
File: App.js
import React from "react";
import "./styles.css";
import Button from "./Button";
export default function App() {
return (
<div className="App">
<Button>Hover Me</Button>
</div>
);
}
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