I have the following function to create the base for a custom button:
function CustomButton({ title, onPress }) {
return (
<TouchableOpacity
onPress={() => onPress()}
children={<Text>{title}</Text>}
/>
)
}
However, when I try to style it using the styled method, it won't work:
export const StyledButton = styled(
CustomButton,
'border bg-Primary rounded-full p-2'
)
However, it does work if I apply the style directly the style to the TouchableOpacity:
function CustomButton({ title, onPress }) {
const StyledTouchableOpacity = styled(
TouchableOpacity,
'border bg-Primary rounded-full p-2 text-OnPrimary'
)
return (
<StyledTouchableOpacity
onPress={() => onPress()}
children={<Text>{title}</Text>}
/>
)
}
Why is that? No errors are displayed to the console… I tried returning the StyledTouchableOpacity (without a style) in case returning a styled component works, but it didn't.
Related
I am new to styled components and I have a wrapper component that is a div element that I want to style . But when I inspect the specific element using React Dev Tools it is named styled.div and not Wrapper.And the theme is not passed to the children of the wrapper .Why is this happening ?
My code where I return the wrapper :
const Wrapper = styled.div`
background: red;
`;
return (
<ThemeProvider theme={theme}>
<Wrapper name="wrapper" ref={target}>
{items.map((props, key) => {
return <SliderWrapper key={key} {...props} />;
})}
</Wrapper>
</ThemeProvider>
);
I'm trying to animate the width of a div of a child component. My code is simple:
export const OuterComponent = () => {
const sidebarCtx = useContext(SidebarContext);
const style =
"w-[100px] h-[60px] transition-all duration-1000 bg-purple-900 text-2xl text-white " +
(sidebarCtx.isOpen ? " w-[400px] " : "");
const InnerComponent = ({ children }) => {
return (
<div className={style}> // if I apply style just to this div transition won't work anymore
{children}
<a>testing</a>
</div>
);
};
return (
<div className={style}> // if I apply style here and remove the above style on the InnerComponent transition works OK as normal
<InnerComponent />
</div>
);
};
As explained in the code comments, the problem is that if I apply style to InnerComponent directly, the width change is not animated.
What is happening since you have defined InnerComponent inside OuterComponent, it is reinitiated on each OuterComponent render, and that is probably messing with your animation.
try this:
const InnerComponent = ({ children, classNames }) => {
return (
<div className={classNames}> // if I apply style just to this div transition won't work anymore
{children}
<a>testing</a>
</div>
);
};
export const OuterComponent = () => {
const sidebarCtx = useContext(SidebarContext);
const classNames =
"w-[100px] h-[60px] transition-all duration-1000 bg-purple-900 text-2xl text-white " +
(sidebarCtx.isOpen ? " w-[400px] " : "");
return (
<div className={style}> // if I apply style here and remove the above style on the InnerComponent transition works OK as normal
<InnerComponent classNames={classNames} />
</div>
);
};
Through CSS you can just apply the transition to the parent element; then set overflow of the parent element to hidden. I think this should work.
I'm not sure but u can try this.
const style =
`w-[${sidebarCtx.isOpen ? 400 : 100}px] h-[60px] transition-all duration-1000 bg-purple-900 text-2xl text-white`.
I know that tailwind default, not support variable as parameter CSS like color etc. Are there any hacks on the market for this?
My code:
code in .tsx file:
<Disclosure.Button className={`${error}`}>
tailwind.config:
error: "#cf222e",
You can do like this:
First define the color in tailwind.config.js file like this:
module.exports = {
theme: {
colors: {
// Configure your color palette here
'error':{
100:'#cf222e',
200:'#cf222e',
300:'#cf222e',
.
.
900:'#cf222e',
}
}
}
First you can use this color in the .tsx file directly.
<Disclosure.Button className="text-error-100">
Second You can define as variable like this
const errorColor = `text-error-100 bg-error-300`
and then use it like this
<Disclosure.Button className={`${errorColor}`}>
Third you can also add some condition like this
function change_error_color(res) {
if(res === "small_error") return `text-error-100`
else if(res === "large_error") return `text-error-900`
}
And use it like
<Disclosure.Button className={`${change_error_color(res)}`}>
At the moment my fast hack:
const DisclureCustom = ({ title, color = "metal", children }: Props) => {
const switchColor = ` text-${color} bg-${color}/60 hover:bg-${color}/25 focus-visible:ring-${color}`;
return (
<Disclosure>
{({ open }) => (
<div className="pt-2">
<Disclosure.Button
className={
switchColor +
`flex justify-start w-full px-4 py-2 rounded-lg focus:outline-none focus-visible:ring focus-visible:ring-opacity-75`
}
> ...
</Disclosure>
);
};
export default DisclureCustom;
I want to change the underline of:
I use material ui version 4.12.3
The code for creating my tabs is here:
function renderTabs(): JSX.Element {
return (
<Tabs className={classes.tabBar} value={activeTab} component={Paper} onChange={handleChange} centered>
{TABS.map((tab: string) => {
return (
<Tab
className={classes.tabButton}
key={`tab-${tab}`}
label={tab}
value={tab}
component={Link}
to={`${url}/${tab !== TABS[0] ? tab : ''}`}
/>
)
})}
</Tabs>
)
}
and in my tab_menu.style.ts I have the following code:
export default makeStyles(() =>
createStyles({
root: { width: '60%', margin: 'auto' },
tabBar: {},
tabButton: {},
})
)
I tried to change colors/background colors/text decorations in the tabBar as well as the tabButton, but the blue underline never changed.
How can I change the underline style?
As per material-UI documentation (Tab API, Tabs API) , you need to pass classes instead of className as a prop. Just write classes instead className.
I'm new to Material UI and I'm struggling.
I have a button component
export default function TheButton(props: PropsWithChildren<Props>) {
const { className, hover, level,...rest } = props;
const classes = useStyles();
return (
<Button
{...rest}
className={clsx(classes.root, className, hover === 'contained' && classes.hoverContained)}
>
{props.children}
</Button>
);
}
From this component, I'd like to have two variants: contained and outlined. Here is my outlined button.
<TheButton
variant="outlined"
color="secondary"
>
secondary
</TheButton>
When the variant outlined is selected the button has the class Muibutton-outlined. I'd like to override this class to change the border (only in the outlined variant, so only on this class).
So far I've tried something like:
const useStyles = makeStyles((theme: Theme) =>
createStyles({
'.MuiButton-outlinedSecondary':{
border:"2px solid red" ,
},
}
)
It doesn't work.
I have a similar setting, and I tried:
adding a class submit to my button component
<Button
type="submit"
variant="outlined"
disabled={isSaving || invalid || unchanged}
color="secondary"
className={classes.submit}
>
SAVE CHANGES
</Button>
since I have the submit class I can be more precise in my styling like so:
const useStyles = makeStyles({
submit: {
marginTop: padding.medium,
marginLeft: padding.small,
'&.MuiButton-outlinedSecondary': {
border: '1px solid pink',
},
},
});
Here is the result:
Material-ui button with pink border image
As long as I have used Ant design ui kit and I have overrided styles on its default style like this:
<Button type="primary" className={styles.custom_css}>click</Button>
This has done in react and custom_css class overrides its styles on default
This might can help you, if not please let me know