I would like to use styled components to style this icon/emoji '😀'.
So what should i do?
export const Icon = style.img``
What should i do to insert this emoji?
Related
I have this React component which is a simple button component:
const Button = ({ children }) => <button>{children}</button>;
I tried to pass the above component inside a styled in order to try to change its styles like this:
const StyledButton = styled(Button)`
color: yellow; //does not work
button {
color: yellowgreen; //does not work
}
`;
I am new to styled components so I am not even sure this is possible to do.
Thank you in advance for the help!
When using styled-components for your custom React components, styled-components needs to know where to inject the CSS you want to give to your <button> tag. This is done by passing the className prop to your Button component and passing it as a prop to the <button> tag.
Please try to edit your code like so:
const Button = ({ children, className }) => <button className={className}>{children}</button>;
You can read more about it here Styled Components - Existing CSS.
How can I change the default appearance of a button, so every time I create a button it will look the same? I understand how to i.e. use the color theme to change the i.e. "primary" color, and how to change the css for i.e. all button background colors.
But how would I go about if I for example want:
All buttons to automatically appear as "small" and "tile" by default?
Create your own component, e.g. like this one at src/components/XBtn.vue:
<template>
<v-btn
v-bind="$props"
small
tile
v-on="$listeners"
>
<slot></slot>
</v-btn>
</template>
<script>
import VBtn from 'vuetify/lib/components/VBtn/'
export default {
name: 'XBtn',
props: VBtn.options.props,
}
</script>
Then elsewhere in your app, you can import it:
<template>
<v-row>
<x-btn color="primary">Save</x-btn>
</v-row>
</template>
<script>
import XBtn from '#/components/XBtn'
export default {
name: 'SomeOtherComponent',
components: {
XBtn,
},
}
</script>
Or if you want it to be globally available without having to import it each time, you can register it in src/main.js like this:
// ... other imports ...
import XBtn from '#/components/XBtn'
Vue.component('x-btn', XBtn)
new Vue({
// ... main Vue instance config ...
})
The cool thing about doing it this way is that the XBtn component you derive from VBtn will have ALL of the same properties and events. XBtn will default to small and tile but you can still override these by doing something like: <x-btn large>. You basically use it the exact same way that you use VBtn.
I created a simple styled component with a custom property test, but when rendered, the test property just did not appear in the div dom, what happened?
const StyledDiv = styled.div<{
test?: boolean;
}>`
color:red;
`;
//in render function...
<StyledDiv test>it's just test</StyledDiv>
In React boolean value is not passed to the dom element in means that test or test={true} will not be available to the dom. It only supports three types of string, number and object and it will convert those to string so all you need to do is change it too test="" and it will work.
If you are looking to access the prop test in your component you need to do something like this:
const StyledDiv = styled.div`
color: ${({test}) => test ? 'red' : 'blue'};
`;
I want to use theme variables to style my Icon accordingly. However i cant use style property to fill the Icon element of react-native-ui-kitten but instead have to use the fill property. How can I access theme variables outside of the withStyles function of react-native-ui-kitten
#xk2tm5ah5c
You can use theme property if you wrap your component into withStyles.
Here is an example code:
import React from 'react';
import { View } from 'react-native';
import { Button, Icon, withStyles } from 'react-native-ui-kitten';
const ScreenComponent = (props) => {
const iconColor = props.theme['color-primary-default'];
const FacebookIcon = (style) => (
<Icon {...style} fill={iconColor} name='facebook' />
);
return (
<View>
<Button icon={FacebookIcon}>LOGIN WITH FACEBOOK</Button>
</View>
);
};
export const Screen = withStyles(ScreenComponent);
I'm not quite sure I understand your question completely. Usually when you have a question, you should post some of your code for context.
Here is my answer assuming 'Theme variable' is a hash... Try string interpolation:
fill={`${theme.HEX_COLOR}`}
I have a Field Formik's component, in order to apply custom CSS I do:
const Input = styled(Field)`
// CSS goes here
`
And use Input component, works fine. However I use exactly the same CSS in many places, so I've extracted those CSS to standalone styled-component called SuperInput
Now, how can extend style-componet? I need something like
const Input = styled(Field)`
// inlucde CSS from SuperInput component here
`
Example code.
import styled from 'styled-components'
const SuperInput = styled.input`
// CSS here
`
import { Field } from 'formik'
import { SuperInput } from 'styled_components/super_input'
const SomeFormComponent = () => (
<>
// How to use here <Field /> that has <SuperInput /> CSS applied?
</>
)
Basically you just need to spread or append inside the template literals to get it to work. you can keep the common CSS something like
import styled, { css } from "styled-components"
const commonCss = css`
background: red;
`
And can use it in your component like this:
const Input = styled(Field)`
// CSS goes here
${commonCss}
color: hotpink;
`;
const Input1 = styled(Field)`
${commonCss}
color: lightblue;
`;
This should allow you to use the common CSS in various styled components.
For more info, you can read through css styled component API
Edit:
Styled components create HOCs.
After the added superInput definition, I understand what you are trying to do. So your superInput is creating a button with the certain css properties which you are trying to reuse. In that case when you are using Field and trying to extend SuperInput which is a button doesnot make sense. Your Field component is by default a input element(text box), it can be checkbox, radio, file input also.Whatever CSS is written in superInput can be extracted the way I mentioned above and used at multiple places. The way you are trying to do is not the way styled component is designed. That's my understanding
Note : I may be wrong here about whether it is possible or not. But that's what i can say according to my awareness . Anyone Feel free to correct me if I am wrong.