Issue
I have a function that checks to see what the length of the passed in prop is and if the length is too long I want to adjust the font-size to be smaller. (I can't use a dynamic width because the component has a custom animation)
Current Code
const checkLength = () => {
if (props.text.length > 7) {
return "15px";
} else {
return "17px";
}
};
const MyButton = styled.button`
font-size: 17px;
`
I tried to write it like this but it doesn't read the function.
const MyButton = styled.button`
font-size: checkLength();
`
Solution
Thanks for the code example. The checkLength
function needs to be in a scope that is accessible from MyButton
. In functions that you pass to the styled component template literals, you have access to all props that are passed to the component when rendered. I've expanded your code to include two usages of MyButton
, take a look:
const App = () => {
return (
<div>
<MyButton text="hello">
<span>hello</span>
</MyButton>
<MyButton text="yar">
<span>yar</span>
</MyButton>
</div>
)
}
const checkLength = (props) => {
if (props.text.length > 4) {
return '20px';
} else {
return '24px';
}
}
const MyButton = styled.button`
font-size: ${checkLength};
`
ReactDOM.render(<App />, document.getElementById('app'));
Answered By - Shtobar
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.