I have built some components such as buttons and I want to use and reuse just about everywhere in my site.
I have already create plugins
Object.entries(components).forEach((([name, component]) => {
Vue.component(name, component)
}))
and registered in nuxt.config
plugins [
'#/plugins/components'
]
<style lang="scss">
.btn__container {
border-radius: '5px';
border: '1px solid red';
background-color: 'red';
}
</style>
but then when i call the component it doesnt apply the style
<v-button>button</v-button>
i am trying to inspect my custom button element and it got strikethrough i dunno why
border-radius: '5px'; is not valid CSS
Try with border-radius: 5px;!
Related
I have two components, each with a CSS module:
src/_components/ProfileImage.tsx
import styles form './ProfileImage.module.scss';
function ProfileImage () {
return (
<img className={styles.profileImage} />
)
}
export default ProfileImage;
src/_components/ProfileImage.module.scss
.profileImage {
height: 50px;
width: 50px;
}
and
src/ProfilePage/Profile.tsx
import styles form './ProfilePage.module.scss';
function ProfilePage () {
return (
<ProfileImage className={styles.profileImage}
)
}
export default ProfilePage;
src/ProfilePage/Profile.module.scss
.profileImage {
composes: profileImage from '_components/ProfileImage.module.scss';
outline: 1px solid red;
}
This doesn't seem to work, not even when I use relative paths.
SCSS doens't recognise the property composes.
Is there a better way to compose modules than this? I am switching from CSS-in-JS to CSS modules, but I really miss how easy it was to compose components with emotion or styled-components.
in src/ProfilePage/Profile.module.scss
#import '/ProfileImage.module.scss' /* your ProfileImage scss file path */
.profileImage {
#extend .profileImage;
outline: 1px solid red;
}
this will work
I have a hover style in my component:
const style = css`
color: blue;
&:hover {
color: red;
}
`;
Can you mock this in Storybook so that it can be shown without having to manually hover over the component?
Since in Storybook you need to show the component hover appearance, rather than correctly simulate the hover related stuff,
the first option is to add a css class with the same style as :hover :
// scss
.component {
&:hover, &.__hover {
color: red;
}
}
// JSX (story)
const ComponentWithHover = () => <Component className="component __hover">Component with hover</Component>
the second one is to use this addon.
I am conditionally styling my <input/> (standard HTML) component. I am passing inline JSX style as a style prop:
render() {
return (
<>
<input
type="text"
style={{
width: "100%",
paddingLeft: "8px",
paddingTop: "6px",
paddingBottom: "6px",
border: this.state.error
? "2px solid red"
: this.state.value
? "2px solid #2684ff"
: "2px solid hsl(0, 0%, 80%)",
outline: "0px",
"&:hover": {
border: "2px solid green"
}
}}
placeholder={this.props.placeholder}
onChange={this.handleInput}
onFocus={this.checkErrors}
value={this.state.value}
onBlur={this.sendData}
/>
{this.state.error ? (
<div className="errorMsg"> {this.props.errorMsg} </div>
) : null}
</>
);
}
My conditional styles work, and <input/> border colour changes based on this.state.error and this.state.value, however I can't get '&:hover' style to work. I have checked my .css and there is nothing overriding the style passed as props.
I have tried another approach, where I conditionally set className for my <input/> and define style in external .css file. It works and I can change border colour with:
input[type="text"]:hover {
border: 2px solid pink;
}
However, I would like to make this work in inline JSX. Why does my style for '&:hover': { ... } not work?
The "&" operator mean the current selector in preprocessing language like sass:
input {
&:hover {
background: red;
}
}
Will compile to:
input:hover {
background: red;
}
But you will have to use sass or styled component to use that sync tax.
Pseudo css selectors don't work in inline style.btw I would not recommend any of the js solution in the comments above .you need a more a robust css solution to handle all kind of pseudo selectors.
Your options are:
Use css in js solution like styled-components.https://styled-components.com/
Use regular css or scss and condionaly switch classNames.You
can utilize classnames library for easier experience.https://www.npmjs.com/package/classnames
Render style tag above your input and put your input styles there.quite bad practice and ugly.
I'm currently styling active nav links using Gatsby Link components, Styled-Components Library and the activeStyle object.
Here the Gatsby docs I'm referencing.
The issue I have is css properties such as background: "red" or border: "2px solid green" work, but when I use border-bottom: 2px solid green or background-color: "red" I get an error.
SyntaxError: Unexpected token, expected "," (78:8)
76
77 const activeStyles = {
78 border-bottom: "2px solid orange",
^
79 };
80
I'm using Gatsby 2.7.1 and Styled-components 4.2.0. Up to this point, I have not had any issues with Gatsby or Styled-components. I have tried placing the object in the Link component directly too but the same issue comes up.
<Link to="/" activeStyle={{ border-bottom: "2px solid orange"}}>
Home
</Link>
I currently doing this
<StyledNavLink to="/" activeStyle={activeStyles}>
Home
</StyledNavLink>
// Styled Component
const StyledNavLink = styled(props => <Link {...props} />)`
font-size: 18px;
width: 100%;
color: white;
text-decoration: none;
text-transform: uppercase;
display: flex;
align-items: center;
padding: 0 24px;
`;
// Style Object passed to Gatsby Link Component
const activeStyles = {
border-bottom: "2px solid orange", // Does not work
border: "2px solid orange" // This does work
};
I'm expecting to use all CSS properties but only able to use single word CSS properties.
I don't think this is a styled-component problem.
What am I missing?
From the docs,
The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes.
For example, if style attribute is border-bottom then in react is should be borderBottom and if style attribute is border-top-left-radius then in react it should be borderTopLeftRadius and so on.
You should use this,
const activeStyles = {
borderBottom: "2px solid orange", // Now it will work
border: "2px solid orange" // This does work
};
The activeStyle property seems similar to style property in react.
So you can use syntax mentioned below to solve this
activeStyle={{ color: "red" ; "background":"blue" }}
I haven't tried this in gatsby. But still I believe it should work as it works fine in react.
Here is the code, very simple and copy paste from office website
$scope.show = function() {
// Show the action sheet
var hideSheet = $ionicActionSheet.show({
destructiveText: 'Delete Photo',
titleText: 'Modify your album',
cancelText: 'Cancel <i class="icon ion-no-smoking"></i>',
cancel: function() {
// add cancel code..
},
buttonClicked: function(index) {
return true;
}
});
// For example's sake, hide the sheet after two seconds
$timeout(function() {
hideSheet();
}, 2000);
};
I want to change the cancel button have a red color background, how I can achieve it in ionic frameworks?
Easiest way is to look at the markup using your browser (after running ionic serve in your terminal), for example in Chrome ctrl+shift+i, where you can choose the button and see what classes are attached. In your case you'll see something like this:
<div class="action-sheet-group action-sheet-cancel" ng-if="cancelText">
<button class="button ng-binding"
ng-click="cancel()"
ng-bind-html="cancelText">Cancel</button>
</div>
Which has styles that for the parent div, and child button something like this:
.action-sheet-group {
margin-bottom: 8px;
border-radius: 4px;
background-color: #fff;
overflow: hidden;
}
.action-sheet .button {
display: block;
padding: 1px;
width: 100%;
border-radius: 0;
border-color: #d1d3d6;
background-color: transparent;
color: #007aff;
font-size: 21px;
}
Just change these values either in Sass or directly in your styles sheet if you're not using Sass.