-
-
Notifications
You must be signed in to change notification settings - Fork 9.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Can't change background of canvas #12305
Comments
I had the same issue which was caused by setting |
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks! |
I have the same problem. It seems the plugin does not work. // preview.js
import React from 'react';
import {themes} from '@storybook/theming';
const theme = process.env.STORYBOOK_THEME || themes.light;
const Theme = {
LIGHT: 'Светлая тема',
DARK: 'Темная тема',
};
const globalTypes = {
theme: {
name: 'Theme',
description: 'Изменение темы',
defaultValue: Theme.LIGHT,
toolbar: {
icon: 'circlehollow',
items: [
Theme.LIGHT,
Theme.DARK
]
}
}
};
const parameters = {
docs: {
theme
},
backgrounds: {
default: Theme.LIGHT,
values: [
{
name: Theme.LIGHT,
value: '#fff'
},
{
name: Theme.DARK,
value: '#2f2f2f'
}
]
}
};
const getThemeColor = (theme) => {
const {value} = parameters.backgrounds.values.find(({name}) => name === theme);
return value;
};
const withThemeProvider = (Story,context) => {
const {theme} = context.globals;
const backgroundColor = getThemeColor(theme);
document.body.style.backgroundColor = backgroundColor;
return (
<div style={{backgroundColor}}>
<Story {...context} />
</div>
);
};
const decorators = [withThemeProvider];
export {
globalTypes,
decorators,
parameters
}; |
@yannbf can you give a hand? |
Hey @jauggy thanks a lot for putting up a reproduction! It helps a lot.
In storybook 6.0, the background is set at the iframe level, which is less specific than the body. In Storybook 6.1 this problem is fixed. This is your storybook running with Also, Storybook 6 supports typescript out of the box! So you can remove these lines from your main.js: webpackFinal: async (config) => {
config.module.rules.push({
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"],
include: path.resolve(__dirname, "../"),
});
- config.module.rules.push({
- test: /\.(ts|tsx)$/,
- loader: require.resolve("babel-loader"),
- options: {
- presets: [["react-app", { flow: false, typescript: true }]],
- },
- });
- config.resolve.extensions.push(".ts", ".tsx");
return config;
}, You can also use main.ts and preview.(ts|tsx)! |
@yannbf thanks a lot. It works! |
upd @yannbf , I ran it — there seems to be a problem with docs. |
@monolithed good that you had your problem solved! From your screenshots I can't really get much info. If you have a reproduction repo it would be easier to help! |
@yannbf The problem is that I cannot change a background color in the Doc tab ( |
@monolithed thanks! That was clear from your screenshots, but without a reproduction repo I can't infer anything more than that. |
I had the same issue in 6.0.5 (docs Canvas elements not using the same background-color that they do in the sandbox mode) but this issue appears to be solved by updating to Storybook 6.1.1. |
The problem is fixed for me by installing 6.1.1 |
Thanks for the update @monolithed. Closing! |
Describe the bug
I can't change the background of the canvas. Also looking at the tutorials the canvas should have white background but for some reason mine is grey.
To Reproduce
Clone repo at: https://github.com/jauggy/storybook-background-issues
npm i
npm run storybook
Notice the Canvas background is gray. Also when clicking the background addons you can't change it.
Expected behavior
White background on canvas and ability to change the canvas background via the background addon.
Screenshots
If applicable, add screenshots to help explain your problem.
Code snippets
If applicable, add code samples to help explain your problem.
System:
Additional context
Add any other context about the problem here.
The text was updated successfully, but these errors were encountered: